css 滤镜 filter 属性

最新推荐文章于 2025-05-06 10:05:22 发布

sunyv1

最新推荐文章于 2025-05-06 10:05:22 发布

阅读量355

点赞数

CC 4.0 BY-SA版权

分类专栏：前端学习经历文章标签： html html5 css css3 前端

原文链接：https://blog.youkuaiyun.com/weixin_42703239/article/details/81843093

前端学习经历专栏收录该内容

47 篇文章

订阅专栏

本文详细介绍了CSS滤镜属性的多种效果，包括模糊、亮度、对比度、投影、灰度、色相旋转、图像反转、透明度、饱和度及褐色转换。通过调整参数，开发者可以轻松实现丰富的视觉效果。

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

本文转载至这里

filter:blur(4px);//模糊
filter:brightness(2);//亮度，默认是1。可以使用百分比也可以使用小数表示。
filter:contrast(2);//对比度,默认是1。可以使用百分比也可以使用小数表示。
filter:drop-shadow(2px 10px 0 rgba(255,0,0,0.5));//投影,(x偏移  y偏移   模糊范围   颜色)
filter:grayscale(0.5);//灰度,0~1,0%~100%
filter:hue-rotate(125deg);//色相旋转,让图像中的颜色，在色相环中做对应的旋转。
filter:invert(100%);//反转图像,黑变白，白变黑
filter:opacity(0.5);//透明度
filter:saturate(200%);//饱和度
filter:sepia(100%);//转为褐色,值为100%则完全是深褐色的，值为0%图像无变化。