css - 传输到外部样式表时内联 CSS 不起作用

Question

我不明白为什么当我将内联 CSS 传输到外部样式表时背景图像会消失。这是 CSS:

.col {
     margin-top:-20px;
     width: 20%;
     float: left;
     }
.col li {
     font-size:9px;
     padding:10px 10px 10px 0px;
     border-bottom:1px solid #f6f4e7;
     line-height:15px;
     }
.col li:hover {
     background:#f7f3e3;
     }

.sample span {
     background:url(../image.jpg) no-repeat left;
     padding: 10px 0;
     padding-left:35px;
     }

这是 HTML:

<ul class="col">
<li class="sample"><span><a href="/webpage">anchor text</a></span></li>
</ul>

col 和 col.li 的 CSS 在传输到外部样式表时工作正常。但是，一旦我传输 .sample span 的 css，图像背景就会消失。另外，据我所知，类名是唯一的，我没有看到重写的情况。

知道这是为什么吗？

Answer 1

url(...) 是相对于它所在的文件而言的。因此，当它位于 html 文件中时，它会尝试加载 ../image.jpg 来自 HTML 文件位置。当您将其移动到 CSS 文件时，如果 css 文件位于不同的文件夹中，它可能会搜索不同的文件夹。

将 URL 设置为绝对 URL 或将其调整为相对于 .css 文件，您的代码应该可以正常工作。

顺便说一句，您将来可以确认这一点的一种方法是在浏览器中按 F12，然后单击该元素并检查 css 规则。它具有调试信息，包括事件规则和要检查的图像链接。