背景固定,内容滑动效果 - 仿QQ下载首页
效果
今天看了 IAM QQ 的首页感觉非常漂亮,所以模仿着去实现下效果。
其实最重要的一个属性就是background-attachment
。
废话少说,贴图贴代码。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!--css-->
<style>
.fixed-bg {
background-image: url("bg1_1600.jpg");
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.fixed-bg2 {
background-image: url(" avds.jpg");
min-height: 300px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<!--不带图-->
<p>这是没有带图的背景</p>
<!--带图-->
<div class="fixed-bg">这是已经带图的,可以在css里面设置图片的属性</div>
<!--不带图-->
<div style="height:800px;background-color:white;">这是没有带图的背景(height = 800 ).</div>
<!--带图-->
<div class="fixed-bg2">这是已经带图的,可以在css里面设置图片的属性</div>
<!--带图-->
<div class="fixed-bg">这是没有带图的背景</div>
</body>
</html>