Question

我正在尝试将Navbar.png作为背景图像添加到导航栏。

我的图片位于assets / img / navbar.png

我已经尝试了一切，但它不会出现！有什么建议吗？

我尝试将背景图片添加到其他类和标签中，但它没有显示任何内容。我做错了什么？

非常感谢任何帮助！

这是我到目前为止的html：

 <!DOCTYPE html>
<html lang ="en">
    <head>
        <title>Chia Vet</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="assets/css/project.css">
    </head>
    <body>
        <div id="wrapper">
            <header class="banner">
            <img src="assets/img/1 (4).png" alt="Chia Vet Logo">
               <div class="signup">

               </div>
            </header>
            <nav>
                <ul id="navlist">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="products.html">Meet the Vets</a></li>
                    <li><a href="faq.html">Services</a></li>
                    <li><a href="products.html">About Us</a></li>
                    <li><a href="faq.html">Directions</a></li>
                    <li><a href="faq.html">Chia Tips</a></li>
                </ul>
            </nav>
            <main>
                <div class="main">
                    <div class="tag">
                    </div>
                </div>
            <section class="newsBox">
                <div class="news"></div>
                <div class="news"></div>
                <div class="news"></div>
            </section>
            </main>
            <footer>
                <div class="testimony"></div>
                <div class="contact">
                     </a>
                </div>
                <div class="location"></div>
            </footer>
        </div>
    </body>
</html>

这是css：

div .main {
    padding-left: 585px;
    padding-top: 100px;
}

footer {
    color: #000000;
    padding: 20px;
    background-color: white;
}


nav a:link {
    color: #000;
    font-size: 24pt;
    padding: 0px 10px;
}

nav a:visited {
    color: #FFFFFF;
}

nav a:hover {
    color: #74B978;
}


#navlist {
    display: inline-flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#navlist li {
    padding: 0 10px 5px 10px;
}

#navlist a {
    text-decoration: none;
    color: white;
    padding-bottom: 15px;
}

nav {
    background-image: url( assets/img/navbar.png );
    background-repeat: repeat-y;
}


@media only screen and (max-width: 320px) {

}

Answer 1

在CSS路径中，相对于样式表文件，因此您应将assets/img/navbar.png替换为../img/navbar.png：

background-image: url( ../img/navbar.png );

..表示“转到父目录”，在本例中为“assets”。

Answer 2

使用/启动路径，使用图像的绝对路径。

background-image: url( /assets/img/navbar.png ); /* absolute path */
background-image: url(  assets/img/navbar.png ); /* relative path */

请务必检查您的devtools网络面板，确保您要求提供您认为要求的文件。

导航栏中的CSS图像未显示

2 个答案: