FE Notes | CSS background-attachment 的三个值

文档在此:

其中的 scroll 和 local 并不是很好理解,根据文档,它俩的主要区别在于是否对元素的边框有效。所以我自己在文档例子的基础上增加了边框,试了一下每种情况的具体表现。
我设置的情况是元素的高度和宽度固定,有边框,内容超出时有滚动效果:

p {
  width: 300px;
  height: 500px;
  overflow: scroll;
  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
  background-attachment: fixed;
  border: 10px black dashed;
}

fixed

可以想象背景和元素和元素内容都没有半毛钱关系,它固定在了元素渲染时的初始位置就不动了,无论是元素内部内容滚动还是元素滚动,背景都订死了。


fixed.gif

scroll

元素内容(也就是元素内部滚动条)滚动时,效果与 fixed 相同,但当元素滚动时,背景会跟随元素一起滚动。
也就是文档里所说的,背景相对于元素本身固定,元素本身作为滚动的一部分时,背景与元素站在同一阵营。


scroll.gif

local

在这次测试中,local 与 scroll 的主要区别就在于边框。local 中背景的位置在边框之内,不包含边框。


local.gif
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,786评论 1 92
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,081评论 0 1
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,594评论 32 459
  • CSS 单位尺寸: 颜色: 尺寸属性: width/height:宽高 overflow:当内容溢出元素框时如何处...
    南山伐木阅读 498评论 1 0
  • 今天做了:菠菜煎饼 韭苔炒鸡蛋 孜然炒肉 酸辣土豆丝 先生吃完直说幸福。 希望以后在这里用心记录每一餐
    宝宝用力跑阅读 250评论 0 1