Question

使用CSS3，您可以使用多个背景图像。

假设我有一个尺寸为div {width:100px; height:200px;}的DIV容器。

我有4个100/50px背景图像，我想垂直对齐这些图像，以便整个DIV从上到下填充这4个背景。

这可能吗？

Answer 1

您可以在css3 http://caniuse.com/#feat=multibackgrounds

中的背景中拥有多张图片

#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; */
...

CSS3多重背景垂直对齐

2 个答案: