图像未显示在导航栏下

问题描述 投票：0回答：1

我有一个基本网站，其中应该有一个背景图像显示在所有元素下方，但是当我显示它时，它永远不会显示在导航栏下方。当我将其设置为背景图像时，甚至会发生这种情况，但它不是不显示，而是在导航栏背景中显示图像的第二个副本。

这是我的代码：

<!DOCTYPE html>
<html class="gallery-html">
    <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>The Create Mod - Gallery</title>
        <link rel="stylesheet" href="style.css" />
        <script src="https://kit.fontawesome.com/8d3778546a.js" crossorigin="anonymous"></script>
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;600;700&display=swap" rel="stylesheet" />
        <script defer src="app.js"></script>
    </head>
    <body>
        <div class="container home">
            <section class="home">
                <nav class="nav-2">
                    <a href="boxmodel.html"><img class="nottobescaled" src="images/logo.png" alt="The Create 'Rise and Shine' Logo" class="image-1" /></a>
                    <div class="nav-links-2" id="navLinks-2">
                        <i class="fa-solid fa-xmark" style="color: #fffcdd" onclick="hideMenu()"></i>
                        <ul>
                            <li><a href="boxmodel.html">HOME</a></li>
                            <li><a href="about.html">ABOUT</a></li>
                            <li><a href="https://github.com/Creators-of-Create/Create">THE GITHUB</a></li>
                            <li><a href="https://github.com/Creators-of-Create/Create/wiki">OFFICIAL WIKI</a></li>
                            <li><a href="https://create.fandom.com/wiki/Create_Mod_Wiki">UNOFFICIAL WIKI</a></li>
                        </ul>
                    </div>
                    <i class="fa-solid fa-bars" style="color: #fffcdd" onclick="showMenu()"></i>
                </nav>
            </section>
            <script>
                var navLinks = document.getElementById("navLinks");

                function showMenu() {
                    navLinks.style.right = "0";
                }

                function hideMenu() {
                    navLinks.style.right = "-200px";
                }
            </script>
            <section class="home onlytexthome image-slide-parent">
                <img class="image-slide" src="images/gallery-1.png" />
                <!-- <div class="image-blank-div"></div> -->
                <div class="content">
                    <h1>
                        Beautiful.
                        <br />
                        <span class="styled-text">Aesthetics</span>
                    </h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi esse ullam enim vero blanditiis nostrum unde, eius inventore provident voluptates voluptatibus molestiae dolorum, nobis maxime doloribus quae nesciunt delectus error!</p>
                </div>
            </section>
        </div>
    </body>
</html>

.nav-2 img {
    transition: transform 0.5s ease-in-out;
    width: 150px;
}
.nav-2 img:hover {
    transform: scale(1.2);
}
.nav-2 i {
    display: none;
}
.nav-2 {
    display: flex;
    padding: 2% 6%;
    justify-content: space-between;
    align-items: center;
}
.nav-links-2 {
    flex: 1;
    text-align: right;
}
.nav-links-2 ul li {
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    position: relative;
}
.nav-links-2 ul li a {
    color: white;
    text-decoration: none;
    font-size: 13px;
}
.nav-links-2 ul li::after {
    content: "";
    width: 0%;
    height: 2px;
    background: var(--orange-wheel-hex);
    display: block;
    margin: auto;
    transition: 0.5s;
}
.nav-links-2 ul li:hover::after {
    width: 100%;
    border-radius: 50px;
}
.onlytexthome {
    padding: 100px 200px;
}
.gallery-html {
    position: relative;
    display: block;
    width: 100%;
}
.gallery-html ul li a {
    color: black;
}
.home {
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    background: var(--xanthous-hex);
    z-index: 10;
    background-image: url(images/);
}
.home .image-slide-parent img {
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-size: cover;
}
.onlytexthome p {
    padding-left: 0;
    color: black;
    font-weight: 600;
}
.onlytexthome h1 {
    font-size: 4em;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 5px;
    line-height: 75px;
    margin-bottom: 40px;
}
.content {
    z-index: 1;
}
.container .home {
    z-index: 1;
}

我尝试将其更改为背景图像，但它只是复制了它，显示了两次，一次在导航栏中，另一次在正文中。我期待图像覆盖整个屏幕。我也尝试过 z-index，但这似乎不起作用。

html css image navbar background-image
1个回答
0
投票

我注意到的一件事是您在两个部分上应用了“home”类。

可以在容器类上添加“home”类，这样它就会调用一次。

样品：

<!DOCTYPE html>
<html class="gallery-html">
    <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>The Create Mod - Gallery</title>
        <link rel="stylesheet" href="style.css" />
        <script src="https://kit.fontawesome.com/8d3778546a.js" crossorigin="anonymous"></script>
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;600;700&display=swap" rel="stylesheet" />
        <script defer src="app.js"></script>
    </head>
    <body>

        <style>


.nav-2 img {
    transition: transform 0.5s ease-in-out;
    width: 150px;
}
.nav-2 img:hover {
    transform: scale(1.2);
}
.nav-2 i {
    display: none;
}
.nav-2 {
    display: flex;
    padding: 2% 6%;
    justify-content: space-between;
    align-items: center;
}
.nav-links-2 {
    flex: 1;
    text-align: right;
}
.nav-links-2 ul li {
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    position: relative;
}
.nav-links-2 ul li a {
    color: white;
    text-decoration: none;
    font-size: 13px;
}
.nav-links-2 ul li::after {
    content: "";
    width: 0%;
    height: 2px;
    background: var(--orange-wheel-hex);
    display: block;
    margin: auto;
    transition: 0.5s;
}
.nav-links-2 ul li:hover::after {
    width: 100%;
    border-radius: 50px;
}
.onlytexthome {
    padding: 100px 200px;
}
.gallery-html {
    position: relative;
    display: block;
    width: 100%;
}
.gallery-html ul li a {
    color: black;
}
.home {
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    /* background: var(--xanthous-hex); */
    z-index: 10;
    background-image: url(https://png.pngtree.com/thumb_back/fh260/background/20200714/pngtree-modern-double-color-futuristic-neon-background-image_351866.jpg);
}
.home .image-slide-parent img {
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-size: cover;
}
.onlytexthome p {
    padding-left: 0;
    color: black;
    font-weight: 600;
}
.onlytexthome h1 {
    font-size: 4em;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 5px;
    line-height: 75px;
    margin-bottom: 40px;
}
.content {
    z-index: 1;
}



        </style>
        <div class="container home">
            <section class="">
                <nav class="nav-2">
                    <a href="boxmodel.html"><img class="nottobescaled" src="https://img.freepik.com/free-vector/bird-colorful-gradient-design-vector_343694-2506.jpg" alt="The Create 'Rise and Shine' Logo" class="image-1" /></a>
                    <div class="nav-links-2" id="navLinks-2">
                        <i class="fa-solid fa-xmark" style="color: #fffcdd" onclick="hideMenu()"></i>
                        <ul>
                            <li><a href="boxmodel.html">HOME</a></li>
                            <li><a href="about.html">ABOUT</a></li>
                            <li><a href="https://github.com/Creators-of-Create/Create">THE GITHUB</a></li>
                            <li><a href="https://github.com/Creators-of-Create/Create/wiki">OFFICIAL WIKI</a></li>
                            <li><a href="https://create.fandom.com/wiki/Create_Mod_Wiki">UNOFFICIAL WIKI</a></li>
                        </ul>
                    </div>
                    <i class="fa-solid fa-bars" style="color: #fffcdd" onclick="showMenu()"></i>
                </nav>
            </section>
            <script>
                var navLinks = document.getElementById("navLinks");

                function showMenu() {
                    navLinks.style.right = "0";
                }

                function hideMenu() {
                    navLinks.style.right = "-200px";
                }
            </script>
            <section class=" onlytexthome image-slide-parent">
                <img class="image-slide" src="images/gallery-1.png" />
                <!-- <div class="image-blank-div"></div> -->
                <div class="content">
                    <h1>
                        Beautiful.
                        <br />
                        <span class="styled-text">Aesthetics</span>
                    </h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi esse ullam enim vero blanditiis nostrum unde, eius inventore provident voluptates voluptatibus molestiae dolorum, nobis maxime doloribus quae nesciunt delectus error!</p>
                </div>
            </section>
        </div>
    </body>
</html>

希望有帮助。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.