设置背景图像是否固定或者随着页面的其余部分滚动
这句话很简洁,简洁到我无法去理解,所以我决定用我自己的想法去理解。
大家先来看看我的html代码:
大家也可以直接复制我的代码去看看效果。
可以看见,盒子内部和窗口都可以滚动
背景图片随着页面的滚动而滚动
当我们滚动div里面的滚动条时,发现图片不会动
而当我们滚动窗口的滚动条时,发现图片会跟着动
背景图片不会随着页面的滚动而滚动
.div1{background-image:url("../img/qier.png");width:100px;height:400px;overflow:scroll;background-attachment:fixed;}

我们保存刷新页面,然后继续进行上面的操作
当我们滚动div里面的滚动条时,发现图片还是不会动。
而当我们滚动窗口的滚动条时,发现图片不会跟着动,而是固定在窗口一样
背景图片会随着元素内容的滚动而滚动
.div1{background-image:url("../img/qier.png");width:100px;height:400px;overflow:scroll;background-attachment:local;}
我们保存刷新页面,然后继续进行上面的操作
当我们滚动div里面的滚动条时,发现图片会跟着动。
而当我们滚动窗口的滚动条时,发现图片也会跟着动
background-attachment的值,以及相对于的效果相信大家已经感受到了,实践出真知,动手操作一遍就懂了。
在日常的使用中,还是background-attachment:fixed使用的最多,因为这个属性更多的时候是跟background-image等背景相关的属性一起使用,目的更多的是设置背景图,而一般背景图是固定的,不会随窗口的滚动而滚动,就像是“镶”在窗口的一样,所以background-attachment:fixed是我学习和工作以来使用最多的,而其他的几乎没有使用的机会(也可能是我个人的接触有限)。
到此这篇关于关于css中的background-attachment属性详解的文章就介绍到这了,更多相关background-attachment属性内容请搜索巴适教程以前的文章或继续浏览下面的相关文章,希望大家以后多多支持巴适教程!
Copyright @ 2021 巴适自动秒收录 此内容系本站根据来路自动抓取的结果,不代表本站赞成被显示网站的内容或立场。 蜀ICP备15001851号
本页阅读量次 | 本站总访问次 | 本站总访客人 | 今日总访问次 | 今日总访客人 | 昨日总访问次 | 昨日总访客人 | 网站地图
巴适自动秒收录于2010年7月建站,现已经稳定运行
技术支持:巴适自动秒收录