CSS filter
属性提供了强大的图像处理功能,允许开发者在不借助图像编辑软件的情况下,直接通过CSS代码为网页元素(主要是图片)添加各种视觉效果。下面我将详细解析你提供的代码示例,并全面介绍所有可用的滤镜函数
基本语法
js
.filtered-image {
filter: <filter-function> [<filter-function>]* | none;
}
代码示例解析
js
.filtered-image {
filter: grayscale(50%) blur(2px);
/* 其他滤镜 */
filter:
brightness(1.2)
contrast(0.8)
sepia(0.3);
}
注意 :这个示例中有两个filter
声明,实际使用时只会应用最后一个(CSS的层叠特性)。正确的做法应该是将所有滤镜函数合并到一个filter
属性中:
js
.filtered-image {
filter:
grayscale(50%)
blur(2px)
brightness(1.2)
contrast(0.8)
sepia(0.3);
}
各滤镜函数详解
1. grayscale()
灰度滤镜
-
作用:将图像转换为灰度图
-
参数:0%到100%之间的值
- 0%:原始图像
- 100%:完全灰度
-
示例:
js
filter: grayscale(50%); /* 50%灰度 */
filter: grayscale(1); /* 等同于100%,完全灰度 */
2. blur()
模糊滤镜
-
作用:对图像应用高斯模糊
-
参数:长度值(如px、rem等),值越大越模糊
- 0:无模糊
-
示例:
js
filter: blur(2px); /* 2像素模糊 */
filter: blur(0.5rem); /* 使用相对单位 */
3. brightness()
亮度调节
-
作用:调整图像亮度
-
参数:数值或百分比
- 1或100%:原始亮度
- <1:变暗
-
1:变亮
- 0:全黑
-
示例:
js
filter: brightness(1.2); /* 亮度提高20% */
filter: brightness(80%); /* 亮度降低20% */
4. contrast()
对比度调节
-
作用:调整图像对比度
-
参数:数值或百分比
- 1或100%:原始对比度
- <1:降低对比度
-
1:提高对比度
- 0:完全灰
-
示例:
js
filter: contrast(0.8); /* 对比度降低20% */
filter: contrast(120%); /* 对比度提高20% */

5. sepia()
棕褐色滤镜
-
作用:将图像转换为棕褐色调(复古效果)
-
参数:0%到100%之间的值
- 0%:原始图像
- 100%:完全棕褐色
-
示例:
js
filter: sepia(0.3); /* 30%棕褐色效果 */
filter: sepia(100%); /* 完全复古效果 */

其他重要滤镜函数
6. hue-rotate()
色相旋转
-
作用:改变图像的整体色调
-
参数:角度值(deg)
- 0deg:无变化
- 360deg:完整色环旋转
-
示例:
js
filter: hue-rotate(90deg); /* 色调旋转90度 */

7. saturate()
饱和度调节
-
作用:调整图像颜色饱和度
-
参数:数值或百分比
- 1或100%:原始饱和度
- <1:降低饱和度
-
1:增加饱和度
- 0:完全去色(与grayscale(100%)类似)
-
示例:
js
filter: saturate(1.5); /* 饱和度提高50% */

8. opacity()
透明度调节
-
作用:调整图像透明度
-
参数:0到1之间的值
- 1:完全不透明
- 0:完全透明
-
注意 :与
opacity
属性不同,filter: opacity()
在某些浏览器中可能有更好的性能 -
示例:
js
filter: opacity(0.7); /* 70%不透明 */

9. invert()
颜色反转
-
作用:反转图像颜色
-
参数:0%到100%之间的值
- 0%:原始图像
- 100%:完全反转
-
示例:
js
filter: invert(100%); /* 完全反转颜色 */

10. drop-shadow()
投影效果
-
作用 :为图像添加投影(比
box-shadow
更符合图像轮廓) -
参数 :与
box-shadow
类似,但不支持inset
和spread
drop-shadow(offset-x offset-y blur-radius color)
-
示例:
js
filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5));

组合使用多个滤镜
可以组合多个滤镜函数,按顺序应用效果:
js
.complex-filter {
filter:
brightness(1.1)
contrast(1.2)
saturate(1.3)
hue-rotate(15deg)
drop-shadow(2px 2px 5px #333);
}