我有一个div
我想给他2个或更多的背景图像。我用两个图像为div
类设置了一个样式:
.manyImages {
background: url(/a1.png), url(/a2.png) no-repeat;
}
<div class="manyImages"> </div>
我的问题是设置不同的背景大小为每个图像URL。我如何控制每个图像的许多背景图像在一个DIV设置大小,边框,颜色...?
编辑:我想控制每个图像的大小在DIV里面,例如第一个图像的背景应该是20px20px,第二个图像应该是40px45px等等。
速记背景:彩色图像位置、位置重复;
background:
url(/a1.png) center center no-repeat,
url(/a2.png) left top no-repeat;
//then
background-size:cover,auto;
//cover,contain,%,px...
不能向背景图像添加边框。
如果不使用cover
或contain
,也很难保持纵横比
只有在chrome中,您还可以通过添加/
,在repeat标记后添加简写background-size。所以
background:color url posx posy repeat / sizex sizey
示例
http://jsfidle.net/at7g4/1/
编辑
如何设置自定义背景大小:
background:url(a.jpg) 0px 0px no-repeat,url(b.jpg) 20px 0px no-repeat,url(c.jpg) 70px 0px no-repeat;
background-size:20px 20px,45px 40px,50px 50px;
示例
http://jsfidle.net/at7g4/2/