将内嵌CSS转移到外部样式表时不起作用

当我将内嵌CSS传送到外部样式表时，我不明白为什么背景图像会消失。这里的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时转移到外部的样式表。但只要我将css转换为.sample span，那就是图像背景消失的时候。另外，据我所知，类名是独特的，我没有看到重写的情况。

任何想法，为什么这是？

来源

2014-11-25 SandyAAJ

图像路径是相对的;首先将其声明为内联的HTML文档，然后添加到样式表。使图像路径相对于样式表。 – 2014-11-25 03:41:47

url(...)与它所在的文件有关。因此，当它位于html文件中时，它会尝试从HTML文件位置加载../image.jpg。当您将它移动到CSS文件时，如果css文件位于不同的文件夹中，它可能会搜索不同的文件夹。

使url或绝对或将其调整为相对于.css文件，您的代码应该工作。

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

来源

2014-11-25 03:42:35

将内嵌CSS转移到外部样式表时不起作用

回答

相关问题