將內嵌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轉移到外部樣式表時不起作用

回答

相關問題