FE Notes | CSS background-attach

文档在此：

• https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment
• https://developer.mozilla.org/zh-CN/docs/Web/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