最近在网上看到了某些页面效果非常好，页面背景图跟着元素内容固定不动
仔细查阅文档发现了个好东西，果然还是需要复盘啊，一个简单的东西在不知道的情况下也是很艰难的
CSS提供了 background-attachment属性，可以灵活控制背景图像是跟着元素的内容一起移动，还是固定不动。其可选值有 scroll | fixed | local，默认值为 scroll。
####background-attachment属性值 含义
######fixed
背景图像相对于窗体固定。任凭页面内容滚动，背景图像始终静止不动
######scroll
背景图像相对于元素固定。当窗体的内容滚动时，窗体的背景图像会跟着移动；当一般元素的内容滚动时，背景图像不会跟着移动，因为背景图像总是要跟着元素本身，但会随元素的祖先元素或窗体一起移动
######loca
背景图像相对于元素的内容固定。当元素的内容滚动时，背景图像总是要跟着内容一起移动
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
| <!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>背景附着定位效果(页面视觉差特效)</title>
<style>
*,body,html{
padding: 0;
margin: 0;
}
.box-con{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.box .cons{
width: 80%;
height: 80vh;
background: gray;
margin: 0 auto;
}
.box-con1{
background-image: url(imges/item1.jpg);
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
background-size: cover;
}
.box-con2{
background-image: url(imges/item2.jpg);
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
background-size: cover;
}
.box-con3{
background-image: url(imges/item3.jpg);
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
background-size: cover;
}
.box-con4{
background-image: url(imges/item4.jpg);
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
background-size: cover;
}
.box-con5{
background-image: url(imges/item5.jpg);
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
background-size: cover;
}
.box-con6{
background-image: url(imges/item6.jpg);
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body>
<div class="box">
<div class="box-con1 box-con">
<div class="cons"></div>
</div>
<div class="box-con2 box-con">
<div class="cons"></div>
</div>
<div class="box-con3 box-con">
<div class="cons"></div>
</div>
<div class="box-con4 box-con">
<div class="cons"></div>
</div>
<div class="box-con5 box-con">
<div class="cons"></div>
</div>
<div class="box-con6 box-con">
<div class="cons"></div>
</div>
</div>
</body>
</html>
|
