Question

所以我学会了设置自动填充浏览器的背景图像的不同方法。有没有一种方法只使用html和css来设置全屏背景图像，然后在下面有另一个全屏背景图像，这样当我最初启动网站时你会看到第一个图像，当你向下滚动时第二个图像会出现？

Answer 1

你可以这样做：

html {
    height:1200px;
    width:600px
}
body {
    height:100%;
    width:100%;
    background: url(http://example.png) no-repeat 50% 600px/600px, url(http://example2.png) no-repeat top/600px 600px;
}

或者，如果它需要流畅，就像这样：

<强> Working Example 2

body, html {
    height:100%;
    width:100%;
    margin:0;
}
#div1 {
    height:100%;
    width:100%;
    background: url(http://example.png) no-repeat 50%/cover;
}
#div2 {
    height:100%;
    width:100%;
    background: url(http://example2.png) no-repeat 50%/cover;
}

Answer 2

CSS3允许这类事情，它看起来像这样：

body {
background-image: url(images/bgtop.png), url(images/bg.png);
background-repeat: repeat-x, repeat;
}

The current versions of all the major browsers now support it，但是如果您需要支持IE8或更低版本，那么解决它的最佳方法是增加额外的div：

<body>
<div id="bgTopDiv">
    content here
</div>
</body>
body{
background-image: url(images/bg.png);
}
#bgTopDiv{
background-image: url(images/bgTop.png);
background-repeat: repeat-x;
}

多个全尺寸背景图像

2 个答案: