前言
相信对于大家来说，css的background属性都很熟悉，平时工作中用到的也比较多，这里就不多说了。下面主要介绍下我们今天的主角：background-attachment。
一、介绍
首先，我们先来了解下background-attachment属性。
官方解释：决定背景图像的位置是在视口内固定，还是随着包含它的区块滚动。
其中，该属性有三个值：
scroll：默认值。表示背景相对于元素本身固定， 而不是随着它的内容滚动。意思是，如果当前元素是可滚动元素，当内容滚动时，背景图不会滚动，但是如果当前元素的包裹元素滚动时，图片则会随着父元素一起滚动。fixed：表示背景相对于视口固定。也就是说，设置该值的背景图会依据当前视窗固定，不受包裹它的外层元素滚动影响。local：表示背景相对于元素的内容固定。此时，图片会跟着内容一起滚动。
今天我们主要使用background-attachment:fixed来实现友好的交互效果。下面，就让我们看两个background-attachment:fixed的例子，来感受下它的魅力。
二、手机屏内容切换效果
手机屏内容切换效果，顾名思义，就是模拟实现当页面滚动时，图片固定，仿佛图片只在手机内部切换一样。且看下图感受下效果：
background-attachment的fixed属性值，来实现图片的固定切换。来看下代码实现：
html部分：
<div>
<div class="wrap wrap1">
<div class="content">
<h2>雪人</h2>
<h4>作者：顾城</h4>
<div>
在你的门前
<br />我堆起一个雪人
<br />代表笨拙的我
<br />把你久等
<br />
<br />你拿出一颗棒糖
<br />一颗甜甜的心
<br />埋进雪里
<br />说这样才会高兴
<br />
<br />雪人没有笑
<br />默默无声
<br />直到春天的骄阳
<br />把它融化干净
<br />
<br />人在哪里
<br />心在哪里呢
<br />小小的泪潭边
<br />只有蜜蜂
</div>
</div>
</div>
<div class="wrap wrap2">
<div class="content">
<h2>种子的梦想</h2>
<h4>作者：顾城</h4>
<div>
种子在冻土里梦想春天。
<br />它梦见——
<br />龙钟的冬神下葬了，
<br />彩色的地平线上走来了少年；
<br />
<br />它梦见——
<br />自己颤动地舒展着腰身，
<br />长睫旁闪耀着露滴的银钻；
<br />
<br />它梦见——
<br />伴娘蝴蝶轻轻吻它，
<br />蚕姐姐张开了新房的金幔；
<br />
<br />它梦见——
<br />无数儿女睁开了稚气的眼睛，
<br />就像月亮身边的万千星点……
<br />种子呵，在冻土里梦想春天，
<br />它的头顶覆盖着一块巨大的石板。
</div>
</div>
</div>
<div class="wrap wrap3">
<div class="content">
<h2>无名的小花</h2>
<h4>作者：顾城</h4>
<div>
割草归来，细雨飘飘，见路旁小花含露微笑而作。
<br />野花，
<br />星星，点点，
<br />像遗失的纽扣，
<br />撒在路边。
<br />它没有秋菊
<br />卷曲的金发，
<br />也没有牡丹
<br />娇艳的容颜，
<br />它只有微小的花，
<br />和瘦弱的叶片，
<br />把淡淡的芬芳
<br />溶进美好的春天。
<br />我的诗，
<br />像无名的小花，
<br />随着季节的风雨，
<br />悄悄地开放在
<br />寂寞的人间……
<br />1971年
</div>
</div>
</div>
<div class="wrap wrap4">
<div class="content">
<h2>远和近</h2>
<h4>作者：顾城</h4>
<div>
你
<br />一会看我
<br />一会看云
<br />
<br />我觉得
<br />你看我时很远
<br />你看云时很近
</div>
</div>
</div>
</div>
css部分
.wrap {
height: 700px;
padding: 40px 60px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 10px;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 80% 50%;
&:nth-child(even) {
background-color: #d1e8f0;
}
&.wrap1 {
background-image: url("./assets/1.png");
}
&.wrap2 {
background-image: url("./assets/2.png");
}
&.wrap3 {
background-image: url("./assets/3.png");
}
&.wrap4 {
background-image: url("./assets/4.png");
}
}
给每个模块设置相同的背景属性，不同的背景图，当页面滚动时，fixed的背景图不会随着内容的滚动而滚动，只会依据视窗的位置而变化。
三、镂空广告效果
先来看效果：
html部分
<div class="wrap">
<div class="content">
<h2>雪人</h2>
<h4>作者：顾城</h4>
<div>
在你的门前
<br />我堆起一个雪人
<br />代表笨拙的我
<br />把你久等
<br />
<br />你拿出一颗棒糖
<br />一颗甜甜的心
<br />埋进雪里
<br />说这样才会高兴
<br />
<br />雪人没有笑
<br />默默无声
<br />直到春天的骄阳
<br />把它融化干净
<br />
<br />人在哪里
<br />心在哪里呢
<br />小小的泪潭边
<br />只有蜜蜂
</div>
</div>
<div class="content">
<h2>种子的梦想</h2>
<h4>作者：顾城</h4>
<div>
种子在冻土里梦想春天。
<br />它梦见——
<br />龙钟的冬神下葬了，
<br />彩色的地平线上走来了少年；
<br />
<br />它梦见——
<br />自己颤动地舒展着腰身，
<br />长睫旁闪耀着露滴的银钻；
<br />
<br />它梦见——
<br />伴娘蝴蝶轻轻吻它，
<br />蚕姐姐张开了新房的金幔；
<br />
<br />它梦见——
<br />无数儿女睁开了稚气的眼睛，
<br />就像月亮身边的万千星点……
<br />种子呵，在冻土里梦想春天，
<br />它的头顶覆盖着一块巨大的石板。
</div>
</div>
<div class="content">
<h2>无名的小花</h2>
<h4>作者：顾城</h4>
<div>
割草归来，细雨飘飘，见路旁小花含露微笑而作。
<br />野花，
<br />星星，点点，
<br />像遗失的纽扣，
<br />撒在路边。
<br />它没有秋菊
<br />卷曲的金发，
<br />也没有牡丹
<br />娇艳的容颜，
<br />它只有微小的花，
<br />和瘦弱的叶片，
<br />把淡淡的芬芳
<br />溶进美好的春天。
<br />我的诗，
<br />像无名的小花，
<br />随着季节的风雨，
<br />悄悄地开放在
<br />寂寞的人间……
<br />1971年
</div>
</div>
<div class="content">
<h2>远和近</h2>
<h4>作者：顾城</h4>
<div>
你
<br />一会看我
<br />一会看云
<br />
<br />我觉得
<br />你看我时很远
<br />你看云时很近
</div>
</div>
</div>
css部分
.wrap {
background: url("./assets/bg.jpeg") no-repeat top;
background-attachment: fixed;
background-size: cover;
.content {
background: #ffffff;
padding: 15px 25px;
margin-bottom: 265px;
}
}
通过上面的演示，相信大家对于background-attachment有了一定的认识。不过，不是所有的浏览器都支持background-attachment属性，来看下它的兼容性：
position:fixed结合js来实现，不过实现起来就比较麻烦了，具体可以参考张鑫旭大神的一行CSS实现滚动时藏在信息流后面的广告效果文章。
关于background-attachment:fixed的实战就到这里了，有什么不对的欢迎指出。
