當使用content：url（）作爲本地圖像時，不會顯示圖像，但會顯示網頁網址。爲什麼？

我想把這個圖像變成一個按鈕。它在通過網站URL（而不是我的網站）抓取圖像時起作用，但在使用相對路徑時不起作用。圖像根本不會出現。當使用content：url（）作爲本地圖像時，不會顯示圖像，但會顯示網頁網址。爲什麼？

實施例：

.my-class { 
    content: url(http://themedemo.wpeka.com/wp-content/themes/apppress/images/icons/included/color.png); 
}

將工作，但下面的例子與所述URL是從上方與URL相同的下載的圖像的文件路徑：

.my_class { 
    content: url(/img/color.png); 
}

省略或用引號沒」不會導致任何成功。

我的文件夾的樣子： -CSS-> styles->通用>的style.css -color.png

所以，出於測試目的，我把color.png和CSS文件夾中的相同該項目的水平。

我想，當它工作：

contents: url(../../../color.png);

但不是：

contents: url(/color.ong);

編輯： 我是個白癡。謝謝你們的幫助 - 它實際上點擊了我腦海中的某些東西。

2016-02-22 8protons

你確定相對於樣式表的路徑是正確的？我注意到你有一個領先的'/'。 – Quantastical

你想念那裏引號'xx'.... background-image：url（'../../ images/image.png'）; ？ –

我是通過做內容：url（../../../ color2.png）爲什麼根路徑方法不工作？像：內容：url（/folders/file.png） – 8protons

如果您的網站文件路徑是這樣的：

CSS

www.YourWebsite.com/css/yourCss.css

和你的形象是在這裏：

www.YourWebsite.com/images/yourImage.png

你的相對路徑將是

../images/yourImage.png

的../追溯到然後一個文件夾目標的images/文件夾。

還要注意的是，圖像中的第一個例子文件夾/images/和你的相對路徑例如你正在使用/img/

2016-02-22 22:30:23

除png文件外，兩條路徑無關。第一個是來自其他網站的圖像。第二個是我機器中的相對路徑。 – 8protons

@ 8protons您正在嘗試連接機器上的圖像嗎？您是否將您的機器用作託管WordPress網站的服務器？ –

因此，我看到該網站是在godaddy上，您將需要上傳圖像給godady，然後從那裏瞄準圖像，**您將無法從您的godaddy網站定位您的本地機器** –

請再次檢查您的正道文件或嘗試從路徑刪除/到您的文件，然後再試一次..如下

.my_class { 
    content: url(img/color.png); 
}

2016-02-22 22:24:41 Microsmsm

回答