立即注册
 登录
切换到宽版
开阔云»论坛 › 群组 › 行业交流 › Web技术教程 › css中filter属性和backdrop-filter的应用与区别详解 ...
Web技术教程
群主admin 天启
网页技术交流
 
发新帖
楼主: 零五零八
查看: 825|回复: 0

[使用教程] css中filter属性和backdrop-filter的应用与区别详解

[复制链接]
零五零八 发表于 2020-10-30 20:25:45 | 显示全部楼层
filter和backdrop-filter具有一定区别：
  • Filter不仅仅作用于当前元素，后代元素也会继承这个属性，作用于一个空背景元素则没有效果。
  • backdrop-filter 是使透过该层的底部元素模糊化
  • backdrop-filter属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素 背后 的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
  • backdrop-filter目前兼容性不佳，尤其是安卓移动端。


filter属性


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


1.jpg


从上图来看，大部分浏览器的兼容性都是不错的。我们还是直接用代码来看。


  1. body {
  2.   display: flex;
  3.   width: 100%;
  4.   height: 100vh;
  5.   align-items: center;
  6.   justify-content: center;
  7. }

  9. .img {
  10.   width: 500px;
  11.   height: 500px;
  12. }
复制代码
  1. <body>
  2.     <img src="./img/kyoto.jpg" class="img filter">
  3. </body>
复制代码

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


2..jpg

这是原图呈现的效果。接下来我们看filter的几个比较重要的属性。
opacity
opacity 代表透明度，值为0-1之间的小数，值越大透明度越低。



  2. 3

  4. .filter{
  5.   filter: opacity(.3);
  6. }
复制代码



如下图展示：


4.jpg


blur
  blur可以设置图片使用高斯模糊效果，单位值是px。所谓高斯模糊，就是指一个图像与二维高斯分布的概率密度函数做卷积。简单点说：高斯模糊常常用来模拟人眼中的物体变远、变快的效果。在照片处理中，我们常常将背景施以高斯模糊，使得背景仿佛变远了，从而突出前景的人物或物体。一些所谓“先拍照，后对焦”的技术利用的也是高斯模糊这个效果。若想弄出视点飞快移动的效果，也可以对背景使用高斯模糊。


  1. .filter {
  2.   filter: blur(2px);
  3. }
复制代码

5.jpg

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


  1. .filter {
  2.   filter: invert(1);
  3. }
复制代码

6.jpg

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

  1. .filter {
  2.   filter: saturate(5);
  3. }
复制代码

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


7.jpg


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


  1. .filter {
  2.   filter: grayscale(1);
  3. }
复制代码


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


8.jpg


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


  1. .filter {
  2.   filter: grayscale();
  3. }
复制代码

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


  1. .filter {
  2.   filter: hue-rotate(90deg);
  3. }
复制代码



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

9.jpg
10.jpg

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


  1. .filter {
  2.    filter: brightness(2);
  3. }
复制代码

11.jpg

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


  1. .filter {
  2.   filter: contrast(2.5);
  3. }
复制代码

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

12.jpg


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


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


 13.jpg

backdrop-filter属性
我们回过头来在看backdrop-filter属性以下几点特点
  • backdrop-filter 是使透过该层的底部元素模糊化
  • backdrop-filter属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素 背后 的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
  • backdrop-filter目前兼容性不佳，尤其是安卓移动端。
上面这些只看文字不好理解，我直接上代码：


  1. <div class="container">
  2.   <div class="content"></div>
  3.   <div class="filter">
  4.     Lorem ipsum dolor sit amet consectetur, adipisicing elit. Possimus voluptatem velit quod placeat?
  5.     Cupiditate,
  6.     corporis, et tempore laudantium consequatur labore distinctio nisi inventore totam vero cum est saepe quos
  7.     ad
  8.   </div>
  9. </div>
复制代码

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


  1. body {
  2.   margin: 0;
  3.   padding: 0;
  4. }

  6. .container {
  7.   width: 100%;
  8.   height: 100vh;
  9.   display: flex;
  10.   align-items: center;
  11.   justify-content: center;
  12.   background-color: aqua;
  13. }

  15. .content {
  16.   position: absolute;
  17.   bottom: 40%;
  18.   width: 300px;
  19.   height: 300px;
  20.   background-color: blueviolet;
  21. }

  23. .filter {
  24.   position: absolute;
  25.   bottom: 0;
  26.   width: 100%;
  27.   height: 50%;
  28.   font-size: 32px;
  29.   z-index: 20;
  30. }
复制代码

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


14.jpg


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

  1. .filter {
  2.   position: absolute;
  3.   bottom: 0;
  4.   width: 100%;
  5.   height: 50%;
  6.   filter: blur(5px);
  7.   z-index: 20;
  8.   font-size: 32px;
  9. }
复制代码

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

15.jpg

但如果如下修改样式

  1. .filter {
  2.   position: absolute;
  3.   bottom: 0;
  4.   width: 100%;
  5.   height: 50%;
  6.   backdrop-filter: blur(5px);
  7.   z-index: 20;
  8.   font-size: 32px;

  10. }
复制代码

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


16.jpg


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


  1. .filter {
  2.   position: absolute;
  3.   bottom: 0;
  4.   width: 100%;
  5.   height: 50%;
  6.   background-color: chocolate;
  7.   backdrop-filter: blur(5px);
  8.   z-index: 20;
  9.   font-size: 32px;

  11. }
复制代码


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


17.jpg


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

  1. .content {
  2.   position: absolute;
  3.   bottom: 40%;
  4.   width: 300px;
  5.   height: 300px;
  6. }
复制代码

18.jpg

这就是为什么说，为了看到效果，必须使元素或其背景至少部分透明。我们发现，backdrop-filter属性还只能在部分最新版浏览器上有效果，所以目前来看，此属性的兼容性较差。


3.jpg
回复

举报

返回列表
快速回复 返回顶部 返回列表