html - 在背景图像上填充

Question

我不知道这是否是最佳做法，但我使用背景在 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;}

fiddle :http://jsfiddle.net/9up0kmou/

附言。我知道一个选项是将图像直接放在该 div 上，但我的困境是如果背景图像支持填充或边距。

Answer 1

您可以使用 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 填充以确保文本不与图像重叠是一件简单的事情。