【高频考点精讲】CSS filter属性详解：不用PS也能实现图片模糊、变亮等特效

CSS filter属性详解：不用PS也能实现图片模糊、变亮等特效

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 5 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

大家好，我是全栈老李。今天咱们聊聊CSS里一个特别好玩但经常被忽略的属性——filter。这玩意儿简直就是前端工程师的"美图秀秀"，不用打开PS，几行代码就能让图片模糊、变亮、加滤镜，甚至搞出老照片效果。

一、filter是什么？

filter属性允许我们对元素（通常是图片）施加图形效果，比如模糊、亮度调整、对比度变化等。它本质上是一系列图形操作的集合，浏览器会在渲染时实时计算这些效果。

举个栗子，你拍了一张照片发朋友圈，想加点"复古风"滤镜。传统做法是导进PS调参数，现在用CSS只需要：

img {
   
  filter: sepia(80%);
}

（代码注释：全栈老李提示：sepia值范围0%-100%，数值越高"泛黄"效果越重）

二、filter的十八般武艺

1. 基础滤镜函数

函数	效果	示例值
blur()	高斯模糊	blur(5px)
brightness()	亮度	brightness(1.5)（1.5倍亮度）
contrast()	对比度	contrast(200%)
grayscale()	灰度	grayscale(100%)（完全黑白）
hue-rotate()	色相旋转	hue-rotate(90deg)
invert()	反色	invert(100%)（负片效果）
opacity()	透明度	opacity(0.5)（类似opacity属性）
saturate()	饱和度	saturate(2)（2倍饱和度）
sepia()	深褐色	sepia(50%)（老照片效果）

2. 组合技

多个滤镜可以叠加使用（空格分隔）：

.hero-image {
   
  filter: