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文件中时，它会尝试从HTML文件位置加载../image.jpg。当您将其移动到CSS文件时，如果css文件位于不同的文件夹中，它可能会搜索其他文件夹。

将网址设为绝对网址或将其调整为相对于.css文件，您的代码应该有效。

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

转移到外部样式表时，内联CSS不起作用

1 个答案: