点击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！
background-attachment相信有部分同学都没有用过，甚至都还不知道有这个属性吧，没关系，从今天开始你就知道了。
兼容性方面，chrome是比较全面的。
取值方面，我们主要注意到它的两个取值scroll和fixed。xcroll就是我们平常使用背景图的效果看到的表现。而fixed则是背景相对于当前文档社区定位，也就是说页面再怎么滚动背景图片位置都是不动的。所以下面我们来重点关注一下取值fixed。
一、最简单的视差效果
由取值fixed特性可以可知，实现一个简单的视差自然不在话下。如下
三个DOM的样式如下所示：
.g-img1 {
background-image: url("xxx");
background-attachment: fixed;
background-size: cover;
background-position: center center;
}
看起来的效果就是这样的：
这个属性，看着很厉害的样子，除此之外，它可以实现很多局部的效果。
二、局部效果实现
我在上面DOM里加一个div.box相对于session定位。
.box{
position: absolute;
left:250px;
top:100px;
width:100px;
height:100px;
background:inherit;
filter:blur(5px);
}
继承父元素的背景图，加了一个滤镜模糊的属性，这样就实现的动态模糊效果（可以任意改变其位置属性来模糊你想看到的任意位置）。
按这个思路，我们还可以做一个局部水纹效果，如下所示：
总结一下：
fixed有一个很大的局限，大家可以想一想，测试一下。
閱讀更多 小鄭搞碼事 的文章
