如何排列与背景图像的几个div

Question

我有一个非常大的图像用作背景图像。由于图像非常大，我已将它分成三个图像，可以将图像堆叠在一起。

我把图像与性质“封面”背景图片：

<div class="screen" id="header1"></div> 
<div class="screen" id="header2"></div> 
<div class="screen" id="header3"></div> 

CSS：

#header1 
{ 
    background-color: #000; 
    width: 100%; 
    height: 100%; 
    max-width: 1920px; 
    max-height: 949px; 
    background: url('images/bg1_landscape2.png') no-repeat center center; 
    background-size:cover; 
    -webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
padding: 0; 
margin: 0; 

} 

#header2 
{ 
    background-color: #000; 
    width: 100%; 
    max-width: 1920px; 
    height: 100%; 
    max-height: 947px; 
    background: url('images/bg2_landscape2.png') no-repeat center center; 
    background-size:cover; 
    -webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;padding: 0; 
margin: 0; 

} 
#header3 
{ 
    background-color: #000; 
    width: 100%; 
    height: 100%; 
    max-width: 1920px; 
    background: url('images/bg3_landscape2.png') no-repeat center center; 
    background-size:cover; 
    -webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
padding: 0; 
margin: 0; 
} 

的问题是，在背景图像模式不排队。

无论屏幕有多宽，如何让多个背景图片排列起来？

Answer 1

所以......有几件事情会在这里与此：

1号问题：你有没有做过什么让div的重叠在你的CSS，所以他们会出现只有一个之后在浏览器的文档流中。如果你希望他们所有的重叠完美，又名进行叠加，然后他们需要定位绝对在彼此的顶部，这样

div:first-child { 
    background: red; 
} 
div { 
    background: green; 
    width: 100%; 
    height: 100%; 
} 
div:last-child { 
    background: blue; 
} 

：例如，查看此琴here

div:first-child { 
    background: red; 
} 

div { 
    background: green; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

div:last-child { 
    background: blue; 
} 

另一个问题是为什么你会打破一个大的背景图像到3个较小的图像。我们称之为图像切片，这实际上并不是最佳的。它需要3个http请求，而不是一个来检索那个图像，这比通常小得多的图像花费更多。此外，它是一个背景图像，因此它不会阻止文档完全加载，直到图像加载完毕，如同内嵌图像一样。

希望这会有所帮助。