CSS3模糊滤镜如何应用在背景上而不影响其中内容的显示？

html-css010

CSS3模糊滤镜如何应用在背景上而不影响其中内容的显示？,第1张

滤镜属性被子元素继承了，这个纯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

}