Question

我不知道这是不是最好的做法，但是我用背景在div上放了一些“ok icon”。

我的问题是背景设置为左侧，我无法在图标的左侧放置填充。

<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上，但我的困境是，如果背景图像支持填充或边距。

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。< / p>

请参阅this JSFiddle，我使用background-position任意将勾号图标放在元素的中间位置。

然后只需调整div填充以确保文本不与图像重叠。

Answer 2

我自己可能会做this这样的事情。使用伪元素:: before和:: after非常适合放置图标和其他东西。这样，您就可以获得干净的代码，并且需要更少的包装元素。

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

Answer 3

试试这个：http://jsfiddle.net/87obhb57/5/

长话短说：你不能在背景图像上填充，所以这里的诀窍是在外部div上设置一个background-color，它可以提供块外观;在其上设置一个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;
}

填充在背景图像上

3 个答案: