CSS background-attachment 属性
时间：6年前 阅读：4508
定义和用法
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
默认值： scroll
继承性： no
版本： CSS1
JavaScript 语法：object.style.backgroundAttachment="fixed"
可能的值
值 描述
scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时，背景图像不会移动。
inherit 规定应该从父元素继承 background-attachment 属性的设置。
通过对background-attachment属性的学习，辨析每个属性值之间的区别。
1、fixed与scroll的区别
background-attachment:fixed;当滚动页面滚动条时背景图片位置保持不变。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 400px;
height: 500px;
/*overflow: scroll;*/
/*background-color: #ccc;*/
background-image: url("https://www.qiquanji.com/data/img/dmj/201904051554471444167490.jpg");
/*background-repeat: round;*/
/*background-repeat: space;*/
background-attachment: fixed;
/*background-attachment: scroll;*/
/*background-attachment: local;*/
}
</style>
</head>
<body>
<div></div>
<p style="height:1800px"></p>
</body>
</html>
background-attachment:scroll;当滚动页面滚动条时背景图片随着页面一起滚动（将之前代码的fixed改为scroll即可看到二者区别）。
2、scroll与local的区别（这个区别是相对于当前容器而非整个页面）
background-attachment:scroll;当滚动当前容器滚动条时背景图片位置保持不变
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 400px;
height: 500px;
overflow: scroll;
/*background-color: #ccc;*/
background-image: url("https://www.qiquanji.com/data/img/dmj/201904051554471444167490.jpg");
/*background-repeat: round;*/
/*background-repeat: space;*/
/*background-attachment: fixed;*/
background-attachment: scroll;
/*background-attachment: local;*/
}
</style>
</head>
<body>
<div><span style="height:800px;display:block"></span></div>
<p style="height:1800px"></p>
</body>
</html>
注意：让容器有滚动条效果需加上overflow:scroll;
background-attachment:local;当滚动当前容器滚动条时背景图片随内容滚动（将之前代码的scroll改为local即可看到二者区别）。
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知
网友评论