在CSS訪問精靈的URL的文件夾路徑img

-2

所以我有這個圖像，3 00px by 100px和它的3個圖標在一個我想使用它使用HTML和CSS，但我無法訪問該圖像在我的桌面上的文件夾和我的文件html路徑是C:\Users\User\Desktop\index1.html。這裏是HTML和CSS的任何幫助，我是新來的，所以我有點失落。在CSS訪問精靈的URL的文件夾路徑img

HTML文件

<!DOCTYPE html> 
<html> 
<head> 
<head> 
     <link rel= "stylesheet" href="primary2.css"> 
    </head> 
    <body> 
     <ul class="button"> 
      <li class="yellow"></li> 
      <li class="purple"></li> 
      <li class= "red"></li> 
     </ul> 


</body> 
</html>

primary.css文件

.button{ 
    list-style: none; 
    margin:0; 
    padding:0; 
} 

.button li { 
width:100px; 
height:100px; 
display:inline-block; 
background-color: #000; 
margin-right:10px; 
} 

.button li.info{ 
    background : url(../sprite.JPEG) no repeat; 
}

來源

2014-07-26 user3716794

您的CSS文件和圖像文件在桌面上可用。 –

的相對路徑../指父文件夾，即從C:\Users\User\C:\Users\User\Desktop\

調用時要引用到同一個di文件rectory作爲文件，則可以使用相對路徑./，或者在大多數情況下，前面的斜槓不是必需的......只需指定文件名就足夠用於位於同一文件夾中的文件。

../sprite.JPEG從C:\Users\User\Desktop\指C:\Users\User\sprite.JPEG而./sprite.JPEG或sprite.JPEG將引用C:\Users\User\Desktop\sprite.JPEG。

還要注意你是如何指定的.css文件在你的HTML標籤link ...

我的評論混淆代碼一點，所以我把修改的CSS這裏：

.button{ 
    list-style: none; 
    margin:0; 
    padding:0; 
} 

.button li { 
    width:100px; 
    height:100px; 
    display:inline-block; 
    background-color: #000; 
    margin-right:10px; 
} 

.button li.yellow { 
    background : url(sprite.JPEG) no-repeat; 
}

唯一的變化是最後的樣式定義。

來源

2014-07-26 22:27:21 polarysekt

它仍然沒有工作，我看到的是3個黑盒子，而不是那個顏色，在精靈 – user3716794

方式我不知道，非常感謝你。 – user3716794

他們的東西有錯誤。按鈕li.yellow {url} – user3716794

在CSS訪問精靈的URL的文件夾路徑img

回答

相關問題