本文摘自PHP中文网,作者青灯夜游,侵删。
background-attachment属性需要和background-image属性一起使用,用来设置背景图像是否固定或者随着页面的其余部分滚动。CSS background-attachment属性
作用:background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
基本语法:
1 | background-attachment: scroll | fixed | loca;
|
参数:
scroll:默认值,背景图像会随着页面其余部分的滚动而移动。
fixed:当页面的其余部分滚动时,背景图像不会移动。
loca:背景图像相对于元素的内容固定;当元素的内容滚动时,背景图像总是要跟着内容一起移动。
说明: Internet Explorer 8和更早版本的浏览器不支持多个背景图像在一个元素。
CSS background-attachment属性的使用示例
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 | <!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< style >
body
{
background-image:url('http://ypimg.muzhuangnet.com/Collect/csharp/upload/article/000/000/024/5c6a4428ea867709.png');
background-repeat:no-repeat;
background-attachment:fixed;
}
</ style >
</ head >
< body >
< p >背景图片是固定的,不会随页面的其余部分滚动。</ p >
< p >背景图片是固定的,不会随页面的其余部分滚动。</ p >
< p >背景图片是固定的,不会随页面的其余部分滚动。</ p >
< p >背景图片是固定的,不会随页面的其余部分滚动。</ p >
< p >背景图片是固定的,不会随页面的其余部分滚动。</ p >
< p >背景图片是固定的,不会随页面的其余部分滚动。</ p >
< p >背景图片是固定的,不会随页面的其余部分滚动。</ p >
< p >背景图片是固定的,不会随页面的其余部分滚动。</ p >
< p >背景图片是固定的,不会随页面的其余部分滚动。</ p >
< p >背景图片是固定的,不会随页面的其余部分滚动。</ p >
< p >背景图片是固定的,不会随页面的其余部分滚动。</ p >
< p >背景图片是固定的,不会随页面的其余部分滚动。</ p >
< p >背景图片是固定的,不会随页面的其余部分滚动。</ p >
< p >背景图片是固定的,不会随页面的其余部分滚动。</ p >
< p >背景图片是固定的,不会随页面的其余部分滚动。</ p >
< p >背景图片是固定的,不会随页面的其余部分滚动。</ p >
</ body >
</ html >
|
效果图:
本文参考:https://www.html.cn/book/css/properties/background/background-attachment.htm
以上就是background-attachment属性怎么用的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css里的图片无法显示怎么办
css如何实现波浪效果
详解css z-index的权重问题
css图片可以旋转吗
css 绝对定位是什么
分享一些提高前端开发效率的css 属性选择器!!
css怎么设置文字间距
css样式“list-style:none”是什么意思?
css如何添加阴影边框(代码实例)
什么是css,其主要作用是什么
更多相关阅读请进入《background-attachment属性》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » background-attachment属性怎么用