html - CSS水平列表背景图像不显示

Question

我正在尝试将背景图像添加到一个简单的水平列表中，由于某种原因，我无法显示它。这是一个静态的HTML/CSS练习页面，可以查看@DropBox

这是我的 HTML 标记

<section class="welcome-msg">
            <p>Good Morning</p>
            <ul>
                <li>Edit Bill</li>
                <li>Mark Bill as Paid</li>
                <li>Bill Details</li>
                <li>Help</li>
            </ul>

</section>

这是CSS

.welcome-msg li {
    display: inline;
    float: left;
    margin: 0 20px; 
    background-image: url(Image/details-icon.png);
    background-repeat: no-repeat;
    /*background-position:5px 0px;*/
}

这是图像文件夹的屏幕截图

Answer 1

您的图像文件夹与您的 CSS 文件不在同一个文件夹中。

  -CSS
  --style.css
  -Images
  --img.png
  --img2.png

因此，您需要先升级（离开 css 文件夹），然后进入Image目录。这是通过../在路径的开头使用来实现的。

因此，您的 URI 应该是：

 background-image: url(../Image/details-icon.png);

Answer 2

请使用开发者控制台 (F12) 进行调试。

路径不正确的问题。

background-image: url(../Image/details-icon.png);