CSS background-attachment 属性
定义和用法
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/mip/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/mip/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,我们将及时处理。
微信扫码关注
更新实时通知