Question

我有DIV，我想给他2张或更多背景图片。我使用两个图像将样式设置为DIV类：

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

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

我的问题是为每个图片网址设置不同的背景尺寸。如何在一个DIV上控制许多背景图像的每个图像以设置大小，边框，颜色......？

编辑：我想控制DIV内的每个图像尺寸，例如第一个图像背景应 20px X 20px 第二个图像 40px X 45px < / strong>依此类推......

Answer 1

没问题，你不需要Javascript！

.manyImages {
    width: 500px;
    height: 500px;
    background-image: url(/a1.png), url(/a2.png);
    background-position: center bottom, left top;
    background-repeat: no-repeat;
}

根据您的需要调整位置！

- 编辑 -

请注意，较新的浏览器支持此背景的CSS3更新，但较旧的浏览器不支持。我相信这个列表包括：Mozilla Firefox（3.6 +），Safari / Chrome（1.0 / 1.3 +），Opera（10.5 +），Internet Explorer（9.0 +）

不要在上面的列表中引用我，因为我可能稍微偏离一个或多个，但据我所知，这是真的。

Answer 2

另一种解决方案可能是这样的：

<div class="manyImages">
   <div class="image1"> </div>
   <div class="image2"> </div>
   ...
</div>

在你的CSS上

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

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

然后在每个CSS类上，您可以调整图像的位置。优点是所有浏览器都支持它。

Answer 3

速记背景：彩色图像positionY positionY repeat;

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中，您还可以在重复标记后添加简写背景大小，方法是添加/ ..所以

background:color url posx posy repeat / sizex sizey

例如

http://jsfiddle.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://jsfiddle.net/At7g4/2/

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

3 个答案: