CSS的Backdrop Filter妙用

CSS/设计
574
0
0
2023-01-19

CSS 滤镜属性允许我们使用css对元素后面的内容应用过滤效果,就和ps里面的功能一样(名字都是一样的!)快来看看吧!!!

在日常开发中,偶尔会用到需要处理图片。如果让ui切不同颜色的图片,也会比较棘手,而且多张图片也会占用较多内存,提高http的请求,看一下css的滤镜可能会帮忙解决许多的问题哦!!!

CSS 滤镜 : backdrop-filter

backdrop filter属性允许我们使用css对元素后面的内容应用过滤效果。

img

img

img

原图:

img

其实这些效果看下来,就和ps里面的功能一样(名字都是一样的!)。如果还是不太理解可以打开ps看看。

在此有些重点

  • Backdrop-Filte虽然好但是兼容是个问题。
  • Pc端的IE是不支持的、移动端的Firefox也不支持、版本较低的基本也不支持。
  • Backdrop-Filte虽然和filter的语法一样但是效果可不一样!!