一、filter属性简介
| 值 | 描述 | 示例 |
|---|
| blur(Npx) | 设置高斯模糊效果。N是模糊半径，值越大，模糊效果越明显。 | filter: blur(5px); |
| brightness(%) | 调整图像的亮度。百分比值小于100%会使图像变暗，大于100%会使图像变亮。 | filter: brightness(75%); |
| contrast(%) | 调整图像的对比度。百分比值小于100%会降低对比度，大于100%会提高对比度。 | filter: contrast(150%); |
| drop-shadow(h-offset v-offset blur spread color) | 为图像添加阴影效果。参数分别表示水平偏移、垂直偏移、模糊半径、阴影扩展半径和阴影颜色。 | filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.5)); |
| grayscale(%) | 将图像转换为灰度。百分比值表示灰度级别，100%完全灰度，0%无变化。 | filter: grayscale(50%); |
| hue-rotate(deg) | 改变图像的色相。角度值表示在色相环中旋转的角度。 | filter: hue-rotate(90deg); |
| invert(%) | 反转图像的颜色。百分比值表示反转强度，100%完全反转，0%无变化。 | filter: invert(75%); |
| opacity(%) | 设置图像的透明度。百分比值表示透明度级别，0%完全透明，100%完全不透明。 | filter: opacity(50%); |
| saturate(%) | 调整图像饱和度。百分比值小于100%会降低饱和度，大于100%会提高饱和度。 | filter: saturate(120%); |
| sepia(%) | 将图像转换为褐色调。百分比值表示褐色级别，100%完全褐色，0%无变化。 | filter: sepia(60%); |
二、使用样例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>filter</title></head><body><img src="http://cdn.ljynet.com/img/bit.svg" alt="" /><style>img {filter: grayscale(100%) blur(1px);transition: all 0.3s;}img:hover {filter: grayscale(0%);transition: all 0.3s;}</style></body>
</html>
