2016-07-29 57 views
0

我試圖在WordPress中使用的背景鏈接CSS屬性選擇器的圖像顯示它的頁面http://launique.co.uk/services-float/背景屬性(CSS)不工作,圖像不顯示

上首先我使用默認的圖像和鏈接進入鏈接到默認的圖像,這是我已經上傳到媒體庫:

background: url(http://launique.co.uk/wp-content/uploads/2016/07/fold.gif) no-repeat 0 0;

這沒有奏效。

然後經過一番研究,我在cPanel的子主題文件夾中創建了一個單獨的「images」文件夾。

background: url(images/fold.gif) no-repeat 0 0;

但依然無果......

這是整個就像代碼:

.page-services h1::after { 
content: ''; 
display: block; 
height: 40px; 
width: 40px; 
background: url(images/fold.gif) no-repeat 0 0; 
} 
+0

什麼是0 0? – RamenChef

+0

我通過檢查元素對其進行測試後編輯了我的答案。 http://stackoverflow.com/a/38668570/4298604 –

回答

0

我檢查您的網站的HTML代碼,我沒找到父元素div.page-services中的H1子元素。因此你的CSS規則將不起作用。但是,有一個H3子元素。當我將調試器中的代碼更改爲.page-services h3 :: {...}後出現圖像時。

+0

這是不正確的。該規範不需要報價。請參閱:http://stackoverflow.com/questions/2168855/is-quoting-the-value-of-url-really-necessary – rnevius

+0

您好,欣賞嘗試,但使用引號沒有什麼差別。任何其他想法? – Saqib

+0

**是!!! **就是這樣,你是@Jon Wilson的男人!非常感謝你! – Saqib

0

更新:這應該肯定工作。

.page-services { 
    display: block; 
    position: relative; 
} 
.page-services h3::after { 
    content: ''; 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 40px; 
    width: 40px; 
    background: url('http://launique.co.uk/wp-content/uploads/2016/07/fold.gif') no-repeat; 
} 
+0

謝謝@Steve Ventimigilia,將標題標籤從H1更改爲H3。 – Saqib

+0

您可以隨時通過右鍵單擊頁面並選擇檢查元素來測試這種類型的東西。然後,通過右鍵單擊HTML並選擇「以HTML編輯」,您可以隨時將其用作臨時沙箱(刷新瀏覽器後更改將消失)。添加標籤有其中的CSS會給你實驗的自由,而不會意外地在文件中保存太多的變化(也就是'膨脹')。我主要使用Firefox(這是一種介於中性交叉兼容性的中間瀏覽器),而你只需右鍵單擊並鍵入「Q」即可。 –

+0

欣賞提示@Steve Ventimigilia我會記下它。 – Saqib