填充背景图片
问题描述:
我不知道这是否是最佳做法,但我使用背景在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上,但是我的困境是如果背景图像支持填充或边距。
答
可以使用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填充,以确保文本不重叠的图像。
答
试试这个: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;
}
答
我自己可能会做些类似this的事情。使用伪元素:: before和:: after可以很好地放置图标和其他东西。这样,你可以得到干净的代码,而且你需要更少的包装元素。
#martu::before {
content: url("http://findicons.com/files/icons/2015/24x24_free_application/24/ok.png");
float: left;
margin-right: 10px;
}
姆姆,这是另一个优雅的解决方案。 – crixi 2014-12-01 20:28:27
谢谢@crixi :)我在发帖前看到了你的答案,但我认为解决同一问题的两个好方法并不是太多。 – ev* 2014-12-01 20:34:20