文章目錄
  1. 1. 取值
  2. 2. 代码
  3. 3. 效果
  4. 4. 兼容性

今天看到一个挺好看的页面效果,觉得挺神奇,不觉查看起代码,发现最终实现效果的关键代码是background-attachment。

background-attachment:可以取值 fixed 、 local 、 scroll
默认值:scroll

取值

  1. fixed:
    背景图像相对于窗体固定。依赖于其视口(viewport),当页面滚动时,背景效果不会随之滚动,而是保留背景本来的位置。当滚动式,背景随着当前元素(Div)的滚动而相对应显示。可以想象所有的背景堆积在一起,当前元素滚到时才显示出来。
  2. scroll:
    这是我们平时看到的效果,背景图像依赖于元素,也就是说当元素内容滚动时背景图像不会跟着滚动,因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
  3. local:
    背景图像相对于元素内容固定,也就是说当元素随元素滚动时背景图像也会跟着滚动,因为背景图像总是要跟着内容。(CSS3)

代码

当background-attachment取值fixed时的效果

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
<html>
<head>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}

body div{
height: 800px;
width: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center;
}

.test {
background-image: url(./1.jpg);
}

.test1 {
background-image: url(./2.jpg);
}

.test2 {
background-image: url(./3.jpg);
}

</style>

</head>
<body>
<div class="test">
</div>
<div class="test1">
</div>
<div class="test2">
</div>
</body>
</html>

效果

很酷原理却很简单

兼容性

  1. IE8及更早浏览器不支持CSS3新增local。
  2. Firefox4.0-8.0不支持CSS3新增local。
  3. IE6以下的版本不支持Fixed
comments powered by Disqus
文章目錄
  1. 1. 取值
  2. 2. 代码
  3. 3. 效果
  4. 4. 兼容性