CSS3多背景垂直對齊

Question

使用CSS3，您可以使用多個背景圖像。

比方說，我有一個尺寸爲div {width:100px; height:200px;}的DIV容器。

我有4 100/50px背景圖像，我想對齊這些垂直，使整個DIV充滿了這4個背景從上到下。

這可能嗎？

Answer 1

您可以在後臺多個圖像在CSS3 http://caniuse.com/#feat=multibackgrounds

http://jsfiddle.net/79TyM/

#container { 
    width:200px; 
    height:200px; 
    background: 
     url(http://placekitten.com/100/100) left top no-repeat, 
     url(http://placekitten.com/g/100/100) right top no-repeat, 
     url(http://placekitten.com/g/100/100) left bottom no-repeat,  
     url(http://placekitten.com/100/100) right bottom no-repeat; 
} 

OP想要的背景堆疊，而不是在一個正方形。更新小提琴：http://jsfiddle.net/79TyM/1/

#container { 
    width:100px; 
    height:400px; 
    background: 
     url(http://placekitten.com/100/100) left top no-repeat, 
     url(http://placekitten.com/g/100/100) left 100px no-repeat, 
     url(http://placekitten.com/g/100/100) left 200px no-repeat,  
     url(http://placekitten.com/100/100) left 300px no-repeat; 
} 

Answer 2

是的，有可能使用background: url(...)財產。一個很好的解釋可以找到here。

基本上，這是語法：

... 
background: 
    url(number.png) 600px 10px no-repeat, /* On top, like z-index: 4; */ 
    url(thingy.png) 10px 10px no-repeat, /*   like z-index: 3; */ 
    url(Paper-4.png);      /* On bottom, like z-index: 1; */ 
...