前言

滤镜，就是过滤图像以实现某种特殊效果的东西；在摄影过程中，我们可以通过在镜头前安装滤镜，从而拍出具有各种神奇效果的图片，使用滤镜，能够为我们的图像增添许多丰富的效果

在CSS中，我们同样可以使用滤镜，它就像是网页设计中的魔法镜头，能够为元素和图像增添各种梦幻般的视觉效果，从模糊到色彩变幻，一切尽在掌控之中；它主要以一个属性Filter存在，通过它，我们无需借助图像处理软件就能轻松实现一些复杂的视觉效果，提升页面的设计感和交互体验

基本介绍

CSS滤镜可以用来对图像、背景图像或HTML元素的视觉效果进行调整和操控，类似于在图像编辑软件中使用的滤镜效果

无论是模糊背景、增强对比度，还是让颜色变得更鲜艳，CSS 滤镜都能轻松实现；与传统的图像编辑工具不同，CSS 滤镜的优势在于它们是动态的，可以在不修改原始图片的情况下，实时应用于网页上的任何元素，这不仅节省了设计时间，也为创造独特的交互效果提供了可能

CSS为我们提供了一系列图像处理函数，用于搭配CSS滤镜使用，通过单独或组合地搭配这些函数，可以实现各种丰富有趣的效果

基本语法函数式

filter属性后可跟一系列图像处理函数(不同函数用空格隔开)或none，当使用多个滤镜函数时，最终效果会按从左往右顺序以此运用对应滤镜效果

引用式

filter可以通过url函数，以引用svg元素的滤镜元素<filter>，通过其id进行引用

filter属性最早出现于2012年，为了实现：通过 CSS 属性来应用类似于图像编辑的效果，最初的实现主要侧重于SVG；早期时，只有少数浏览器提供实验性支持，开发者使用时需带上浏览器前缀，如：-webkit-filter，到2015年左右，filter属性的规范逐渐成熟，并被纳入现代 CSS 的主流应用中，不仅提供了丰富的滤镜函数，同时也可以用url()函数引用 SVG 元素的滤镜效果；往后，越来越多的浏览器支持这一属性，使用时也不再需要带上浏览器前缀；随着filter属性的成熟，开发者开始希望能影响元素背景内容的滤镜效果。为此，W3C 引入了backdrop-filter属性，并在2017年左右开始得到浏览器的支持，这个属性为网页设计师提供了更强大的工具，能够轻松实现如玻璃效果(Glassmorphism)等设计风格

其兼容性如下

属性详解

CSS 提供了多种滤镜效果，每一种都有独特的用途，以下主要介绍一些最常用的滤镜

blur

blur()，即高斯模糊效果；用于使元素或图像变得模糊，效果类似于镜头的散焦，它接受一个参数，该参数是模糊半径，单位是像素px，值越大，模糊效果越强

brightness

brightness()用于调整元素的亮度；它接受一个数值参数，1表示原始亮度，值大于1会增加亮度，值小于1则会减低亮度，0为全黑，也可以用百分比数值

contrast

contrast()用于调整元素的对比度；1表示原始对比度，值越大对比度越高，值越小对比度越低，同样可用百分比数值

saturate

saturate()用于调整元素的饱和度；1表示原始饱和度，值大于1增加饱和度，值小于1减少饱和度

grayscale

grayscale()用于将元素转换为灰度图像；它接受一个0到1之间的数值参数，0保持原始色彩，1完全灰度

hue-rotate

hue-rotate()用于调整元素的色相；它接受一个以角度(deg)为单位的参数，改变色相旋转的角度

invert

invert()用于反转元素的颜色，类似于负片效果；它接受一个0到1之间的数值参数，1表示完全反转

opacity

opacity()用于调整元素的不透明度；1表示完全不透明，0表示完全透明

sepia

sepia()用于将元素转换为深褐色(仿古色调)效果；它接受一个0到1之间的数值参数，0为原始颜色，1为完全仿古效果

drop-shadow

drop-shadow()用于为元素应用阴影效果，会沿图像的轮廓生成阴影效果；它与box-shadow类似，但只能应用于图像和其他可视内容，它可以接受颜色、偏移量和模糊半径作为参数，主要用于给异形元素添加阴影效果

filter属性本质上是作用于一个元素及其所有子元素的渲染结果；由于它是对元素的整体进行渲染后的后处理效果，即filter会在整个元素(包括其内容和子元素)渲染完成后，再将滤镜效果应用于整个区域，其子元素无法逃脱这一过程；因此会污染子元素，即子元素会继承并受到父元素filter效果的影响

backdrop-filter

与filter类似的，CSS 还有一个强大的滤镜属性backdrop-filter，它允许开发者在元素的背景内容上应用图形效果，如模糊、颜色调整等，而不会直接影响到该元素的内容，使用方法与filter类似

其核心是作用于元素的背景层，而不是元素本身；背景层指的是元素背后所有可见的内容，包括页面背景和其他元素

由于backdrop-filter是作用于元素背后的可见内容，故为了看到效果，必须使元素或其背景至少部分透明

backdrop-filter旨在为元素的背景添加动态、柔和的滤镜效果，从而提升设计的质感和视觉层次，通过它，我们能够轻松地实现类似毛玻璃的效果

其兼容性如下

应用场景

图像处理：如将图像转换为灰度、增加模糊或应用反转效果

背景效果：如在模态窗口或导航栏上应用模糊效果，以突出前景内容

动画：滤镜与 CSS 动画结合可以实现动态的视觉效果，如淡入淡出、逐步模糊等

使用案例特殊节日的灰调网站

在一些特殊节日，我们可能需要让我们的网站整体呈现一个灰色色调，可以在body使用如下代码：

即可实现如下的灰调页面：

梦幻色彩的图像变换

使用滤镜搭配动画属性使用，可以实现梦幻般的色彩变换

效果如下

gif录制效果存在闪动，实际不会

彩色阴影

通过滤镜，还可以实现与图片一致的彩色阴影

HTML

CSS

总结

CSS 滤镜为现代网页设计提供了无限可能，它们不仅易于使用，还能显著提升页面的视觉效果

通过巧妙地组合不同的滤镜效果，你可以为网站带来独特的设计风格；例如，可以为产品图片添加对比度和饱和度滤镜，让商品看起来更吸引眼球；或是在页面加载时，逐步移除模糊滤镜，营造出“图片逐渐清晰”的动态效果；这些创意的实现，不仅能让设计更具特色，也为用户带来了更丰富的体验感受

当然，也不能盲目地使用滤镜，在使用时也需要注意性能问题，特别是在处理大面积图片或复杂动画时，滤镜可能会对页面的渲染速度产生影响

总之，合理地使用这一属性，能够为你的网页设计增色不少