如何在WordPress中通過CSS加載圖像

我想通過CSS加載背景圖像。我的CSS加載了圖像的例外。如何在WordPress中通過CSS加載圖像

我試圖通過CSS加載圖像文件作爲雪碧。

問題：

該圖像不通過CSS加載。我如何指定通過CSS加載圖像的文件路徑？

我已經嘗試了一些不同的文件路徑的圖像。該圖像存儲在WordPress媒體庫中。該文件路徑是：

wp-content/uploads/2016/12/Sprite.png

我使用的CSS是：

.icon { 
width: 70px; 
height: 70px; 
background-image: url("wp-content/uploads/2016/12/Sprite.png"); 
display: inline-block; 
margin: 0 10px 0 0; 
}

來源

2016-12-19 Gavin Reynoldson

什麼是你所面對的具體問題，你可以提供一個鏈接？ –

嘗試在行尾添加一個'！important' – sebasaenz

您可以在wordpress圖庫中看到圖片的url /路徑。你有沒有從那裏走你的路？ – theoretisch

.icon { 
 
width: 50px; 
 
height: 50px; 
 
background-image: url('http://placehold.it/100x100'); 
 
background-position: 0 0; 
 
}

<div class="icon"></div>

我建議創建你的主題的圖像目錄，並調用它了，而不是上傳，特別是如果精靈圖像文件與你的主題一致。但是，爲了回答你的問題：

要想從上傳圖像做到這一點：「../../../wp-content/uploads/2016/12/Sprite.png」

來源

2016-12-19 16:22:44

引用樣式表中的主題圖像：http://wordpress.stackexchange.com/questions/188725/how-to-reference-a-theme-image-in-a-stylesheet –

這也不起作用。 –

我剛剛注意到你正在調用一個精靈，因此它由多個圖像組成。這意味着當你調用精靈時，你還必須調用座標，以便背景屬性知道要調用的精靈圖像的哪一部分。還要添加「background-repeat：no-repeat」，所以背景只顯示一次精靈。這裏的示例：https：// css-tricks。com/css-sprites /所以你需要設置背景位置：0 0;例如，然後設置高度和寬度，並且這些H和W尺寸基於「背景位置」設置。 –

在你的CSS

部分背景圖像沒有結束標記。它應該是這樣的。背景圖像：網址（「」）;

秒讓我給你看一個例子。這裏是演示wordpress網站。在這個網站這裏是logo。如果我們用這個標誌作爲你的圖標

.icon { 
 
width: 70px; 
 
height: 70px; 
 
background-image: url("https://mediashark.com.au/wp-content/uploads/2016/09/logo-200-1.png"); 
 
display: inline-block; 
 
margin: 0 10px 0 0; 
 
}

<span><i class="icon"></i>TEST</span>

來源

2016-12-19 16:46:55

如何在WordPress中通過CSS加載圖像

回答

相關問題