css中filter属性和backdrop-filter的应用与区别详解css3 filter属性的使用简介CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用使用css的filter写鼠标滑过效果的实现示例CSS filter 有什么神奇用途

filter和backdrop-filter具有一定区别：

• Filter不仅仅作用于当前元素，后代元素也会继承这个属性，作用于一个空背景元素则没有效果。
• backdrop-filter 是使透过该层的底部元素模糊化
• backdrop-filter属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素 背后 的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
• backdrop-filter目前兼容性不佳，尤其是安卓移动端。

filter属性

我们先来说说filter属性，css3中的filter属性简单易用且强大，这些效果作用在图片上可以实现一些特有的特效。而且目前主流浏览器都已经支持了这个属性。

从上图来看，大部分浏览器的兼容性都是不错的。

我们还是直接用代码来看。

 body { display: flex; width: 100%; height: 100vh; align-items: center; justify-content: center; } .img { width: 500px; height: 500px; }

我们定义一张照片在网页中央，先不做任何处理。

这是原图呈现的效果。

接下来我们看filter的几个比较重要的属性。

opacity

opacity 代表透明度，值为0-1之间的小数，值越大透明度越低。

 .filter{ filter: opacity(.3); }

如下图展示：

blur

blur可以设置图片使用高斯模糊效果，单位值是px。所谓高斯模糊，就是指一个图像与二维高斯分布的概率密度函数做卷积。

简单点说：高斯模糊常常用来模拟人眼中的物体变远、变快的效果。在照片处理中，我们常常将背景施以高斯模糊，使得背景仿佛变远了，从而突出前景的人物或物体。一些所谓“先拍照，后对焦”的技术利用的也是高斯模糊这个效果。若想弄出视点飞快移动的效果，也可以对背景使用高斯模糊。

 .filter { filter: blur(2px); }

invert

invert 可以设定反色， 值为0-1之间的小数。

 .filter { filter: invert(1); }

saturate

saturate可以设定照片饱和度，取值范围为数字即可，默认值1，即100%。

 .filter { filter: saturate(5); }

比如这里我设置饱和度是500%，如下图效果：

grayscale

grayscale代表灰度，取值在0-1之间,。

 .filter { filter: grayscale(1); }

下图是grayscale为1，即灰度是100%时候的效果。

另外，如果使用该效果参数里没值的话，也会默认以1，即100%为值取值，即如下面设置。

 .filter { filter: grayscale(); }

sepia

sepia代表的是照片褐色，类似于大部分美图软件里的怀旧功能的那种效果，取值也是0-1，和grayscale一样。

 .filter { filter: sepia(1); }

hue-rotate

hue-rotate用来改变图片的色相，默认值为0deg，取值是角度（angle）。

 .filter { filter: hue-rotate(90deg); }

hue-rotate一般配合css动画使用，可以呈现不一样效果。比如电池充电的动画，随着高度在纵坐标上移，hue-rotate的值逐渐改变，这里因为无法上传git图片，只能看下静态图片：

brightness

brightness可以改变图片的亮度，默认值为100%,即1。

 .filter { filter: brightness(2); }

contrast

contrast代表对比度，这个属性取值和饱和度saturate类似，取值也是数字。

 .filter { filter: contrast(2.5); }

这里我们演示对比度是250%时候的效果，如下图：

drop-shadow

drop-shadow这个属性类似于box-shadow，给图片加阴影。

 .filter { filter: drop-shadow(20px 20px 10px 20px #000) /**水平阴影位置，垂直阴影位置，模糊距离，阴影颜色**/ }

backdrop-filter属性

我们回过头来在看backdrop-filter属性以下几点特点

• backdrop-filter 是使透过该层的底部元素模糊化
• backdrop-filter属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素 背后 的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
• backdrop-filter目前兼容性不佳，尤其是安卓移动端。

上面这些只看文字不好理解，我直接上代码：

 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Possimus voluptatem velit quod placeat? Cupiditate, corporis, et tempore laudantium consequatur labore distinctio nisi inventore totam vero cum est saepe quos ad 

我们定义了一个container元素div，子元素有content和filter两个div元素。

 body { margin: 0; padding: 0; } .container { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: aqua; } .content { position: absolute; bottom: 40%; width: 300px; height: 300px; background-color: blueviolet; } .filter { position: absolute; bottom: 0; width: 100%; height: 50%; font-size: 32px; z-index: 20; }

以上元素，我们可以得到如下布局：

这时候，我们将filter元素改为

 .filter { position: absolute; bottom: 0; width: 100%; height: 50%; filter: blur(5px); z-index: 20; font-size: 32px; }

从代码看，我们添加了filter: blur(5px)。如下图展示效果，我们发现filter元素div和其中的文字内容，都被模糊化了。

但如果如下修改样式

 .filter { position: absolute; bottom: 0; width: 100%; height: 50%; backdrop-filter: blur(5px); z-index: 20; font-size: 32px; }

使用backdrop-filter: blur(5px)元素，则得到如下图排版

我们发现，只有filter元素DIV被模糊化，而子内容文字并没有受到任何影响。

 .filter { position: absolute; bottom: 0; width: 100%; height: 50%; background-color: chocolate; backdrop-filter: blur(5px); z-index: 20; font-size: 32px; }

但是，如果按照以上代码，给filter元素设置了背景色background-color: chocolate，这时候，就几乎看不到模糊化的效果。

或者，我们把content元素DIV背景色去除，

 .content { position: absolute; bottom: 40%; width: 300px; height: 300px; }

这就是为什么说，为了看到效果，必须使元素或其背景至少部分透明。

我们发现，backdrop-filter属性还只能在部分最新版浏览器上有效果，所以目前来看，此属性的兼容性较差。

到此这篇关于css中filter属性和backdrop-filter的应用与区别详解的文章就介绍到这了,更多相关css filter和backdrop-filter内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！