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;*/
}

这是图像文件夹的screenshot

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);