填充背景图片

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

填充背景图片

回答

相关问题