填充背景圖片

我不知道這是否是最佳做法，但我使用背景在div上放置某種「ok圖標」。填充背景圖片

我的問題是背景設置爲左側，我無法在圖標的左側放置填充。

<div id="martu"> 
    <div class="text"> 
     dummy text dummy text dummy text dummy text dummy text 
    </div> 
</div>

CSS

#martu { 
    background: url('image') no-repeat scroll 0px 8px #FFB9D9; 
    padding: 5px 5px 5px 10px; 
    margin-left: 5px; 
} 

.text { font-size:17px; padding-left:20px;}

小提琴：http://jsfiddle.net/9up0kmou/

PS。我知道一個選項是將圖像直接放在該div上，但是我的困境是如果背景圖像支持填充或邊距。

來源

2014-12-01 crixi

可以使用background-position CSS屬性您div調整背景圖像的位置，例如：

#martu { 
    background-position:20px 20px; // where the values are x & y coordinates from the original default position 
}

但是，沒有，短的在圖像編輯器實際上增加空白的圖像（不一個好主意，它會給文件添加不必要的大小），沒有辦法添加background-image-padding。

請參閱this JSFiddle，其中我已經使用background-position任意放置元素中間的刻度圖標。

這是一個簡單的事情，調整div填充，以確保文本不重疊的圖像。

來源

2014-12-01 20:15:26 ReactingToAngularVues

試試這個：http://jsfiddle.net/87obhb57/5/

長話短說：你不能有背景圖像填充，所以這裏的關鍵是要建立一個background-color的外層div，給你塊美觀;在其上設置一個padding，這將提供您正在尋找的效果。

#martu { 
    padding: 5px; 
    background-color: #FFB9D9; 
}

最後，設置內部div的background-image你想要什麼加上padding-left是足夠大，以確保文本和圖像不會重疊。

#martu div.text { 
    background-image: url('something'); 
    background-repeat: no-repeat; 

    padding-left:34px; 
}

來源

2014-12-01 20:21:38 evilham

姆姆，這是另一個優雅的解決方案。 – crixi 2014-12-01 20:28:27

謝謝@crixi :)我在發帖前看到了你的答案，但我認爲解決同一問題的兩個好方法並不是太多。 – evilham 2014-12-01 20:34:20

我自己可能會做些類似this的事情。使用僞元素:: before和:: after可以很好地放置圖標和其他東西。這樣，你可以得到乾淨的代碼，而且你需要更少的包裝元素。

#martu::before { 
    content: url("http://findicons.com/files/icons/2015/24x24_free_application/24/ok.png"); 
    float: left; 
    margin-right: 10px; 
}

來源

2014-12-01 20:34:08 mnsth

填充背景圖片

回答

相關問題