css 导航条颜色不能消失或透明，因为它链接了身体颜色，如何解决？

w8f9ii69 于 2023-02-20 发布在其他

关注(0)|答案(1)|浏览(138)

@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;500;600;700&display=swap');

:root {
    --color-body: #b6cbce;
    --color-heading: #eef3db;
    --color-base: #033f47;
    --color-base2: #022a30;
    --color-brand: #e0f780;
    --color-brand2: #deff58;
    --sidbar-width: 240px;
    --font-base: "Bai Jamjuree";
}

*{
    background-color: var(--color-base2);
    color: var(--color-base);
    font-family: var(--font-base);

}

.navbar .nav-link {
    font-weight: 700;
    text-transform: uppercase;
    color: white;
    transition:all 0.5s ease-in;
}

.navbar .nav-link:hover{
    color: var(--color-brand);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-heading);
    color: aliceblue;
    font-weight: 700;
}

a {
    text-decoration: none;
    color: var(--color-body);
    transition: all 0.5s ease;
}

a:hover {
    color: var(--color-brand);
}

img {
    width: 100%;
}

h3 {
    color: white;
}

@media (min-width:992px) {
    .navbar {
        min-height: 100vh;
        width: 240px;
        background: linear-gradient(rgba(3, 63, 71, 0.623), rgba(3, 63, 71, 0.853)), url(./sidebar-img.jpg);
        background-size: cover;
        background-position: center;
    }

    .navbar img{
        border: 8px solid var(--color-brand);
    }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="   https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">

</head>

<body>
    <!-- Navigation bar start -->
    <nav class="navbar navbar-expand-lg  navbar-dark fixed-top">
        <div class="container flex-lg-column">
            <a class="navbar-brand mx-lg-auto mb-lg-4" href="#"><span class="h3 text-white fw-bold d-block d-none">Shuvo Raj</span>
                <img src="./person.jpg" class="d-none d-lg-block rounded-circle" alt="">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto  flex-lg-column text-lg-center">
                    <li class="nav-item">
                        <a class="nav-link" href="#home">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#services">Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#work">Work</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#about">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#reviews">Reviews</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#blog">Blog</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#services">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- navigation bar close -->

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
        integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"
        integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
        crossorigin="anonymous"></script>
</body>

</html>