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;
}

有没有办法避免重复每个类中使用的图像，同时仍保留背景图像的结构并允许与普通背景图像属性相同的操作？

Answer 1

不幸的是，由于级联的工作原理，不能在不同规则集中指定多个背景图层而不在每个规则集中重新声明相同的背景图层。有关详细信息，请参阅我对this related question的回答：

以逗号分隔的背景图层列表计算为级联目的的单个值，这就是您的第二个background声明完全覆盖第一个{.p>的原因。

虽然background是其他几个属性的简写，但它不是单个背景图层的简写，因为它们没有自己的属性。由于单个图层属性不存在，因此您无法使用级联来仅覆盖某些图层，同时保留其余图层。

Answer 2

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

但首先你需要使用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.

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

2 个答案: