CSS background-attachment属性

尽管考过了英语四级，但我还是不知道attachment这个单词的意思，真有些忏愧。所以在下笔之前，我查了一下attachment这个单词，attachment有“附着”的意思。那么在我的理解，CSS中background-attachment属性就是控制背景图片的附着的问题。

---

background-attachment属性

这位您说了：What Are You Say？好吧，下面开启我们的尬聊模式：对，你没听错，这个属性是用来告诉浏览器背景图片应该附着在哪里。皮之不存，毛将焉附？所谓唇亡齿寒之乎者也。

---

在我看来，背景图片的附着点有三类，分别是浏览器的可视区域、背景容器本身区域和背景容器的内容区域。具体来说，background-attachment的值也就有三种，即：

• scroll：背景图片附着在背景容器上，它是相对于背景容器（元素）固定，它会随着背景容器的滚动，而不是随着它的内容滚动（也可以看成是对元素边框固定）。

• fixed： 背景图片附着在浏览器的可视区域。因为浏览器的可视区域不具备滚动的性格，所以它是不滚动的。

• local：这是CSS3新增的属性值。背景图片附着在背景容器的内容区域。它会随着内容的滚动而滚动。

问：懂了多少，答：懂一大部分了。

那么上图

---

再问：懂了多少，答：懂一小部分了。

那么，再上图

---

三问：懂多少了，答：一点都不懂了！
那么恭喜你，你可以上场了。

---

自圆其图

但凡绝世武功都得有口口相传的心诀：

他强由他强，清风拂山岗。

我的心诀有些长：把background-attachment的应用看成是：

我在房间内透过窗户看屋外的景色，窗户上嵌着三层玻璃，第一层玻璃的名字叫做背景容器内容区域，第二层叫做背景容器区域，第三层叫可视区域。

此时我发现有有些污渍（背景图片）：

• 如果它附着在第一层玻璃上时，当我拉动第一层窗户时，这个污渍也会随之移动（local）；
• 如果它附着在第二层玻璃上时，我拉动第一层玻璃发现并没有动，当我拉动第二层玻璃时，他移动了（scroll）；
• 如果它附着在第三层玻璃上时，我拉动第一、二层玻璃发现并没有动，而第三层玻璃我固定死了，他移动不了了（fixed）；

上面的心诀如果我在变通一些：

如果污渍在第一层玻璃上，那么我拉动第二层玻璃时，我会发现相对于第一层玻璃污渍移动了；如果污渍在第三层玻璃上，那么我拉动第二层玻璃时，相对于第二层玻璃污渍移动了。

另外，为什么是区域的前后顺序是：

背景容器内容区域 > 背景容器区域 > 可视区域

这是有道理的，因为背景容器内容区域的背景色会遮住背景容器区域和可视的背景色，背景容器区域会遮住可视区域的背景色（如果有的话）

番外篇

以上就是background-attachment属性的不同值，拉动不同元素产生的滚动与固定的效果。上述的拉动动作要靠浏览器的滚动条来实现。注意，浏览器上的拉动效果分为：body元素相对于可视区域的拉动、内容元素（子元素）相对于容器元素（父元素）的拉动。

原文链接