CSS 设置背景固定/滚动
background-attachment属性设置背景图像是否固走或者随着页面的其余部分滚动。它的值可以是以下几种：
•scroll：默认值。背景图像会随着页面其余部分的滚动而移动。
•fixed:当页面的其余部分滚动时，背景图像不会移动。
•inherit：规定应该从父元素继承background-attachment属性的设置。
下面通过两个案例来了解background-attachment属性。
【例题】背景图像滚动
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background-image: url(img/0.1.jpg);
background-repeat: no-repeat;
height: 2000px;
}
</style>
</head>
<body>
</body>
</html>
代码运行结果如图所示。从代码运行结果中可以看出，在滚动页面时，背景图片也明显地移动了。
【例题】背景图像不滚动
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background-image: url(img/0.1.jpg);
background-repeat: no-repeat;
height:2000px;
background-attachment: fixed;
}
</style>
</head>
<body>
</body>
</html>
从代码运行结果可以看出，浏览器右边的滚动条已经被拉到页面的中间，但是body元素的背景图像并没有随着页面的滚动而移动。这就是background-attachment: fixed属性的作用。
湘公网安备:43011102000856号 
点击加载更多评论>>