滚动视差



大概就是这样子的滚动效果,感觉很大气,使用 background-attachment: fixed 滑动的时候固定背景,自己把网站的图保存下来试了一下这个属性 collage-min.jpg

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>  
<html>
<head lang="en">
<title>滚动视差</title>
</head>
<style type="text/css">
.fixed{
background-image: url("collage-min.jpg");
background-attachment: fixed;
background-position:top;
background-size: cover;
background-repeat: no-repeat;
height: 400px;
}
</style>
<body>
<div style="height:400px;"></div>
<div class="fixed"></div>
<div style="height:400px;"></div>
</body>
</html>

-------------End of this article, thanks for your reading. -------------
奖励我一个棒棒糖吗?