1

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

4

2 回答 2

2

你可以这样做：

工作示例

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;
}

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

工作示例 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;
}
于 2013-07-07T01:13:54.990 回答
0

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

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

所有主流浏览器的当前版本现在都支持它，但是如果您需要支持 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;
}
于 2013-07-06T23:42:26.770 回答