提问者:小点点

控制一个div的每个背景图像的每个样式属性


我有一个div我想给他2个或更多的背景图像。我用两个图像为div类设置了一个样式:

.manyImages {
    background: url(/a1.png), url(/a2.png) no-repeat;
}

 <div class="manyImages"> </div>

我的问题是设置不同的背景大小为每个图像URL。我如何控制每个图像的许多背景图像在一个DIV设置大小,边框,颜色...?

编辑:我想控制每个图像的大小在DIV里面,例如第一个图像的背景应该是20px20px,第二个图像应该是40px45px等等。


共1个答案

匿名用户

速记背景:彩色图像位置、位置重复;

background:
url(/a1.png) center center no-repeat,
url(/a2.png) left top no-repeat;
//then 

background-size:cover,auto;
//cover,contain,%,px...

不能向背景图像添加边框。

如果不使用covercontain,也很难保持纵横比

只有在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/