文档在此：
- 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
