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

Question

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

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

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

我的问题是为每个图像 url 设置不同的背景大小。 如何在一个 DIV 上控制多个背景图像的每个图像以设置大小、边框、颜色...？

编辑:我想控制 DIV 内的每张图片大小，例如第一张图片背景应该是 20px X 20px 第二张图片 40px X 45px 等等...

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+)

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