多个全尺寸背景图像

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

你可以这样做：

工作示例

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

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

相关内容

最新更新

热门标签：