滤镜属性被子元素继承了，这个纯css不能解决，这玩意子继承了父的模糊根本覆盖不了：
<body>
<div id="a">id=a这层单独放：图片背景+模糊滤镜</div>
<!-- 下面id=b这个div里面才放你网页主要结构 -->
<div id="b">
<div class="horizontal-scroll-area" style="width:3000px"></div>
<div class="horizontal-scroll-pips"></div>
</div>
</body>
然后：
----------------------------------------------------------------------
css 定位属性让 b 重叠在 a 上面合适位置
(给a、b外面再加个父级并相对定位，a、b分别绝对定位)
弄个js，判断 a、b 两个区域的高度，让矮的那个始终高度等于高的那个
(现成的js网上到处都是，自己百度)
最近在写活动页面遇到一个效果，在黑色透明蒙层后面的元素要有模糊，毛玻璃的效果，最初想到的就是 filter: blur(2px) ，直接在元素上使用，但是整个子元素都被模糊了，而且蒙层的背景并没有效果，经过百般搜索和尝试，发现还有一个属性可以实现专门针对有透明度的元素做模糊的效果，而且还不会影响到子元素的展示，它就是 backdrop-filter: blur(3px) ，完美的实现了设计稿的要求。
下面就来看看这两个属性的区别，遇到的问题以及解决方案。
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。
想要模糊图像或者某个不带透明度的元素，可以直接在元素上加 filter: blur(2px) ，如果这个元素下面有子元素，这样写子元素也会被模糊，解决方法是使用伪元素加定位效果实现：
backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素 背后 的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
所以给蒙层的后面添加模糊的效果，可以直接在蒙层元素上使用 backdrop-filter: blur(2px)即可。
这两个属性的使用可以详细的参考 mdn上的描述：
backdrop-filter
filter
如果想改变css背景图片，一般的做法只能使用css滤镜；
css滤镜主要包括：
Speia滤镜 灰度图滤镜 高斯模糊滤镜 反色滤镜 饱和度滤镜
对比度滤镜 亮度滤镜 色相旋转滤镜 阴影滤镜
css滤镜在浏览器兼容是比较坑爹的问题，ie浏览器有自己一套滤镜filter家族，基本所有ie内核浏览器都支持，ff和Chrome，opera则主要使用css3的滤镜，这些浏览器在后期版本支持css3的滤镜（目前版本基本都支持html5和css3），通过滤镜改变背景图的颜色和效果，当然这些滤镜主要是为了效果而产生，颜色只是固定的几种效果；了解更多可以参考：http://www.cnblogs.com/fsjohnhuang/p/4127888.html
个别时候，css滤镜还需要结合js使用，才能到达必要效果，其实一般背景图片都是用透明度的css来设置它的颜色度；
透明度css列子：
transparent_class {
filter:alpha(opacity=50)
-moz-opacity:0.5
-khtml-opacity: 0.5
opacity: 0.5
}
