無法獲取內嵌圖標以顯示在CSS中

我有一個非常簡單的Chrome擴展程序來補充網頁。其中一項功能是添加鏈接以觀看互聯網上的相關比賽。有關HTML是在這裏：無法獲取內嵌圖標以顯示在CSS中

<div class="option-wrap"> 
    <a class="option" href="http://www.google.com" target=_blank> 
     <div class="option-icon tv-icon"></div> 
     TV Link 
    </a> 
</div>

隨着我的CSS這裏：

.tv-icon { 
    margin-right: 2px; 
    float: left; 
    width: 10px; 
    height: 10px; 
    background-image: url("http://sayeedanwar.co.uk/wp-content/uploads/2014/01/tv-servizi.png") no-repeat; 
    display: inline-block; 
}

你會看到幾類出現在不在我的CSS的HTML;它們來自網頁，因爲它存在。此代碼的目標是讓URL指定的電視圖標內嵌顯示在「TV鏈接」文本的右側。當我運行代碼時，似乎爲該圖標分配了空間，並且光標可以單擊該空間，但沒有可見的圖標。我的CSS <有什麼問題嗎？或者這是現有網頁代碼的功能，我必須找到解決方法？

這裏是JSFiddle與上述代碼。

來源

2014-04-21 aquemini

您的'background-image'規則的語法不正確;它看起來像那個和速記背景規則之間的交叉。您鏈接的圖像比您提供的空間大得多。最後，你的HTML無效。鏈接不能包含div。 – j08691

.tv-icon { 
    margin-right: 2px; 
    float: left; 
    width: 20px; 
    height: 20px; 
    background-image: url("http://sayeedanwar.co.uk/wp-content/uploads/2014/01/tv-servizi.png"); 
    display: inline-block; 
    background-size: cover; 
    background-repeat: no-repeat; 
}

JSFiddle

改變我做：

刪除 '不重複' 的 '背景圖片'
附加的背景大小「和 '背景重複'

我也改變了大小。如果需要，請將其更改。

來源

2014-04-21 21:02:10

作品謝謝你，我會接受我的時間。 '覆蓋'是什麼意思？ – aquemini

它基本上意味着'調整圖像的大小，使其覆蓋整個元素，無論是寬度還是高度'。 –

開關你的CSS的最後兩行本

background-image: url("http://sayeedanwar.co.uk/wp-content/uploads/2014/01/tv-servizi.png"); 
background-size: cover;

@Richard羅德里格斯 - 你不應該需要no-repeat，如果你有background-size: cover。由於封面將包含所述區域並減少重複爲空的機會。

來源

2014-04-21 21:03:58 jonode

無法獲取內嵌圖標以顯示在CSS中

回答

相關問題