CSS 滤镜效果
css · beginner · 15-20 min · Step 1/5CSS Filter 滤镜
Filter 提供 Photoshop 风格的视觉效果。
.photo {
filter: brightness(1.1) contrast(1.2);
}
.photo:hover {
filter: brightness(1.3) saturate(1.5);
}
常用滤镜
| 滤镜 | 效果 | 默认值 |
|---|---|---|
| blur(px) | 模糊 | 0px |
| brightness(n) | 亮度 | 1 |
| contrast(n) | 对比度 | 1 |
| grayscale(%) | 灰度 | 0% |
| saturate(n) | 饱和度 | 1 |
| opacity(%) | 透明度 | 100% |
| drop-shadow() | 投影 | — |
backdrop-filter 可以对元素背后的内容做模糊，常用于毛玻璃效果。