CSS滤镜（filter）

最新推荐文章于 2025-05-23 11:51:50 发布

非早起选手

最新推荐文章于 2025-05-23 11:51:50 发布

阅读量2.1w

点赞数 30

分类专栏：前端基础文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/zg0601/article/details/120917933

版权

本文详细介绍了CSS3中的滤镜功能，包括模糊、亮度、灰度、对比度、阴影、反转、不透明度、棕褐色、饱和度和色相旋转等多种滤镜效果。通过使用filter属性和不同函数，开发者可以实现对图片和网页元素的视觉效果调整，无需借助图像编辑软件。文章还提供了多个滤镜效果实例，展示了如何应用这些滤镜到图像上，帮助读者更好地理解和运用CSS3滤镜。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、概念

filters是CSS3里新增的一种神奇的功能，一般我们提及滤镜，就会想到使用PhotoShop制作的图片，但是使用CSS滤镜不需要任何作图软件，仅使用CSS就会生成多种的滤镜效果，例如模糊效果、透明效果、色彩反差调整等等；同时，CSS滤镜不仅可以对图片进行滤镜处理，还可以对网页元素甚至视频进行滤镜处理。

2、使用

CSS 中实现滤镜效果需要通过 filter 属性并配合一些函数来实现。

3、常用filter函数

滤镜效果	函数	补充
无	none	默认值，表示没有效果
模糊	blur(px)	为图像设置高斯模糊，默认值为 0，单位为像素，值较大越模糊
调整亮度	brightness(number)	number越大图像越亮，number不能取负值，可以是整数也可以是百分比