CSS background-attachment 属性详解

前情提要

最近lender给我提了个需求，让我把公司官网的页面样式改改，但是不把ui小姐姐拨给我，让我自己去想怎么美化。众所周知前端开发一向审美不好，不过还好我们外网主公司也有官网，作为一名合格的卡卡西，正好参考外网的改了。改的过程中发现外网官网有用到这个属性，看起来还挺炫酷，今天给小伙伴们讲解一下。

属性简介

background-attachment是css3出的样式，在chrome浏览器上属性共有8种，分别是 scroll、fixed、local、initial、inherit、unset、revert、revert-layer，本次我们重点说说前三个属性，其他是浏览器提供的全局css属性，小伙伴们感兴趣的可以对照下表格简单看下意思。

属性名	说明
scroll	默认属性，设置后背景图片将会随着页面的滚动。
fixed	设置后背景图片将固定位置，不会随着页面滚动
local	设置后背景图片将会随着元素内容的滚动。
initial	css全局属性，表示为默认属性值。
inherit	css全局属性，表示从父元素继承属性值。
unset	css全局属性，表示有可基础属性值时用inherit，没有时使用默认值initial
revert	css全局属性，表示使用浏览器默认的值。
revert-layer	css全局属性，表示获取上一层@layer中设置的同属性值，如果没有则按照revert属性走。

scroll 属性

该属性是 background-attachment 的默认值，也就是我们常规不设置 background-attachment 属性的样子。一般在使用固定背景图，或无需变化背景位置的场景时，我们会用到它。

示例

方便小伙伴们理解，我找了一个长图片，将他设置为背景图，作为示例展示。大家可以看看，就是下面这个的样子。
PS：左侧是原背景图，中测是未滚动的状态，右侧是滚动后的状态

观察上面这幅图，可以看到即便是滚动到最底部，图片展示的依然是上半部分内容。其实这个就是 scroll 属性的作用，其会使背景图随着滚动条滚动，导致我们看到的一直是一幅固定的画面。说白了就是滚动条滚多少，背景图也滚多少，所以背景图的画面一直不变。

应用

相信看到上面的示例，小伙伴大概明白这个属性怎么回事了，接下来我们说一说这个属性的应用。其实 ** scroll ** 属性能应用到的地方有很多，几乎都是我们平常会使用到的地方，但主要应用点还是在那些需要固定显示的场景。

显示固定位置的背景图

有些背景图我们只想要显示一部分内容时，比如下图我们只想显示中间部分。

雪花图

雪花图小伙伴们用的多，一般我们都是根据 background-position 属性进行截取，配合这个属性刚好。

尺寸符合的背景图

这个一般是用在博客文字或者大屏上，比如我们希望博客的背景图沾满屏幕，一直不变化的情况

---

local属性

为了帮助小伙伴们逐步理解，这里我们先打乱顺序，先讲讲 local 属性。该属性在中文的意思是"当地，地方性"，正如他的中文意思，这个属性的作用就是使背景图不随 自身滚动条 滚动，这也是其和 fixed 属性最大的不同。

示例

为了小伙伴们的观感体验，我还是使用和上面一样的图例展示(不是懒哈)，大家可以对比一下两个示例的不同点。
PS：左侧是原背景图，中测是未滚动的状态，右侧是滚动后的状态

观察以上图例，在去对比 scroll 属性的图例，我们能看出明显不同。设置了 local 属性后，再对滚动条进行滚动，背景图也发生了变化，跟着滚动条显示到了下半部分。这个就是 local 属性的作用，让背景图不跟着 自身滚动条 滚动，所以当我们滚动条向下时，背景图的下半部分也展示了出来。

应用

local属性应用的场景其实不多，个人认为在那种以展示为主的网站可能会用到，比如设计类、特性网站之类的。目前还没给小伙伴们找到合适的用例，像我们公司官网，那种门户式网站，布局还用fixed属性效果更好。
PS：后期要是找到有网站在应用，给小伙伴们找找

---

fixed 属性

该属性正是博主在修改官网时用到的属性，和上面的local属性有异曲同工之处，只是两个属性针对的点不一致。fixed属性针对的是所有 父级滚动条，只要有任意 父级滚动条 变化，都会使背景图停止跟随滚动。
PS：小伙伴们怕不好区分的话，就去想position属性中的fixed，它是针对整体页面进行布局的。而这里的fixed是一直从父级生效到整体页面，记住两者作用范围一广就行。

示例

这里我还是用之前的图片，给小伙伴们示例。大家可以参考本示例和上面local的示例进行比对，看看两个属性到底有什么区别。

观察以上图例，在去对比 local 属性的图例，我们能看出其中的不同。设置了 fixed 属性后，再对 自身滚动条 进行滚动，背景图是不会发生变化的，而是会随着滚动条进行滚动。反而我们去滚动其 父级滚动条 ，会发现其发送了变化，这个就是 fixed 属性的作用，任意一个 父级滚动条 滚动，背景图就会停止跟随滚动。

应用

fixed属性个人感觉在周门户性的网站，比如官网、博客文章这些地方会好很多，给人视觉上的感觉也很好，关键是技术点没多少。下面给大家看一下我在公司官网的应用，本来因为没有UI设计，看起来效果不好，加上这小属性后绝了，看起来加了很多特效的样子。

官网示例1

官网示例2

最后

作为一名前端卡卡西，这个CSS属性推荐大家一定学习一下，用完之后瞬间页面感觉高大上不少，关键是代码段还少好记。最后附一张该属性的支持率。