如何使用多個背景圖像指定單個全局背景圖像？

我有幾個容器爲每個容器指定了多個背景圖片，並用逗號分隔，其中一個背景圖片對於每個容器都是相同的。如何使用多個背景圖像指定單個全局背景圖像？

.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

如何使用多個背景圖像指定單個全局背景圖像？

回答

相關問題