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

我有几个容器为每个容器指定了多个背景图片，并用逗号分隔，其中一个背景图片对于每个容器都是相同的。如何使用多个背景图像指定单个全局背景图像？

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

是否有任何方式为避免重复，在每个类中使用的图像，同时仍保持的背景图像的结构，并允许对于相同的操作作为一个正常的背景图片属性的？

来源

2015-04-06 sdvnksv

不幸的是，由于级联是如何工作的，这是不可能来指定不同的规则集多重背景层，而不在每个规则集中重新声明相同的背景层。见我的回答this related question的细节：

的背景图层以逗号分隔列表计为级联，这就是为什么你的第二个background声明完全覆盖第一的宗旨单个值。

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

来源

2015-04-06 10:15:02 BoltClock

-4

你可以用户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.

来源

2015-04-06 10:09:43 user3577900

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

回答

相关问题