如何使用多个背景图像指定单个全局背景图像？

Question

我有几个容器，每个容器都指定了多个背景图像，并用逗号分隔，其中一个背景图像对于每个容器都是相同的。

.foo_1 {
  background-image: url(../img/01.png), url(../img/photo1.jpg);
}
.foo_2 {
  background-image: url(../img/01.png), url(../img/photo2.jpg);
}
.foo_3 {
  background-image: url(../img/01.png), url(../img/photo3.jpg);
}

.foo_1, .foo_2, .foo_3 {
  background-position: top left, center center;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
}

有什么方法可以避免重复每个 class 中使用的图像，同时仍然保持背景图像的结构并允许与普通背景图像相同的操作属性 ?

Answer 1

您可以使用 repeat-x 或重复属性。

但首先您需要使用 Photoshop 为每个容器制作不同的图像：

1. first_img.jpg ( img1.jpg + imga.jpg)

1. second_img.jpg ( img1.jpg + imgb.jpg)

3. third_img.jpg ( img1.jpg + imgc.jpg)


.foo_1 {
  background: url(../first_img.jpg) repeat-x or repeat ;
}
.foo_2 {
  background: url(../second_img.jpg) repeat-x or repeat ;
}
.foo3 {
  background: url(../third_img.jpg) repeat-x or repeat ;
}

Thanks.

Answer 2

遗憾的是，由于级联的工作原理，如果不在每个规则集中重新声明相同的背景层，则无法在不同的规则集中指定多个背景层。详情见我对this related question的回答：

A comma-separated list of background layers counts as a single value for the purposes of the cascade, which is why your second background declaration completely overrides the first.

While background is a shorthand for several other properties, it is not a shorthand for individual background layers, as they do not have their own properties. Since individual layer properties don't exist, you cannot use the cascade to override only certain layers while keeping the rest.

如何使用多个背景图像指定单个全局背景图像？

How do I specify a single global background image using multiple background images?

css

background

background-image