正在加载...

CSS 滤镜

动画写的是时间线。变换（transform）决定像素落在哪。 滤镜改的是像素看起来怎样：模态背后轻微 blur、默认灰度、hover 恢复彩色的缩略图、用 brightness 和 contrast 微调的照片 —— 仍占原来的布局位置。

filter 做什么

filter 在一个元素已绘制的结果上（通常连同子元素作为一组）施加一种或多种后处理效果。宽度、高度和文档流不变，变的只是绘制出来的画面。清除效果用 filter: none（初始值）。

多个函数写在同一个 filter 值里，空格分隔 —— 思路和串联 transform 类似，但这里是视觉工具，不是空间位移：filter: brightness(1.1) contrast(1.05) saturate(1.2);

常见 filter 函数一览

📊 常用 CSS filter 函数

函数 典型用途
blur(radius) 柔化边缘 / 磨砂感（px 等长度）
brightness(%) 变亮或变暗（1 / 100% = 不变）
contrast(%) 拉大或压平明暗层次
grayscale(%) 去色（1 = 全灰）
saturate(%) 提高或降低饱和度
hue-rotate(angle) 在色环上旋转色相
opacity(%) 淡化滤镜后的结果（与 opacity 属性相关但不等同）
sepia(%) / invert(%) 暖色复古 / 反相
drop-shadow(…) 沿 alpha 轮廓的阴影（图标、透明 PNG）
none 移除滤镜

百分数和裸数字往往等价（grayscale(1) ≈ grayscale(100%)）。项目里选一种写法并保持一致。

hover 时“醒”过来的灰度卡片

画廊常见套路：默认去色，hover 全彩。给 filter 加短 transition，恢复颜色才有意图 —— 动效来自前面课程，观感来自本节。

hover 恢复彩色的灰度缩略图

css 
.thumb {
filter: grayscale(1);
transition: filter 0.25s ease;
}

.thumb:hover,
.thumb:focus-visible {
filter: grayscale(0);
}

grayscale(0) 即全彩。只在变化较小时给 filter 做 transition；大图上 animate 强 blur 开销大。

用轻微 blur 做强调

blur() 会把元素柔化。overlay 或背景层用适中半径即可 —— 别糊整页 body，正文还要能读。

模态背后的模糊背景层

css 
.modal-scrub {
filter: blur(6px);
transform: scale(1.02);
}

.modal-dialog {
/* keep the dialog itself sharp — no filter here */
filter: none;
}

模糊大祖先时，里面的文字也会糊。前景必须清晰时，优先模糊单独的背景层（或下面用 backdrop-filter）。

照片的 brightness 与 contrast

商品图、hero 图常需要轻量“调色”，不必开修图软件。

用 brightness 和 contrast 微调照片

css 
.hero-photo {
display: block;
width: 100%;
height: auto;
filter: brightness(1.08) contrast(1.06);
}

.hero-photo.is-muted {
filter: brightness(0.85) contrast(0.95) saturate(0.8);
}

略高于 1 会提亮或加强对比；低于 1 会收一点。小步调整像精修，大步跳容易假。

叠加多个滤镜

一条声明里可以组合色调、颜色和柔化。复杂叠加时顺序有时重要 —— 按想要的视觉效果从左写到右，在浏览器里核对。

叠加 saturate、hue-rotate 与轻微 blur

css 
.sticker {
filter: saturate(1.35) hue-rotate(12deg) blur(0.3px);
}

.sticker.is-print {
filter: grayscale(0.15) contrast(1.1);
}

先从一两个函数起步。设计真需要再加 —— 大面上每多一个 filter，GPU 就多一分活。

drop-shadow() 与 box-shadow

box-shadow 跟着border box。drop-shadow() 跟着 alpha 轮廓 —— 透明 PNG、希望阴影贴字形而不是矩形的图标特别合适。

用 drop-shadow 给图标加阴影

css 
.icon-glow {
width: 2.5rem;
height: 2.5rem;
filter: drop-shadow(0 4px 6px rgba(15, 23, 42, 0.35));
}

.icon-glow:hover {
filter: drop-shadow(0 6px 10px rgba(37, 99, 235, 0.45));
}

drop-shadow() 不支持像 box-shadow 那样的 inset。卡片“内凹” elevation 仍用 Effects 课里的 box-shadow。

Backdrop-filter — 模糊“背后”的内容

backdrop-filter 作用在透过半透明元素看得见的内容上（毛玻璃）。元素本身要有半透明背景，否则没有可采样的东西。

示例思路：内容繁杂的 hero 上方 sticky 顶栏写 background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(10px);。现代浏览器支持面较广；若 blur 可省略，仍保留不透明 fallback 背景。

filter 里的 opacity 与 opacity 属性

filter: opacity(0.5) 淡化的是滤镜绘制结果。opacity 属性淡化整个元素，并常形成包含组，影响 stacking 与子元素合成。若要“整块控件连子元素一起淡”，单独用 opacity 通常更清楚。filter 的 opacity() 适合作为与 blur 或调色同栈的一环。

自己动手

  1. 卡片图加 filter: grayscale(1)；:hover 用 grayscale(0)，并加 transition: filter 0.2s ease。
  2. 背景层用 blur(8px) 柔化；前景文字不加 filter。
  3. 照片试 brightness(1.1) contrast(1.05)；再把两者慢慢调回 1，直到自然。
  4. 贴纸叠 saturate(1.4) hue-rotate(20deg)；去掉一个函数对比。
  5. 透明 PNG 图标用 drop-shadow(...)；同一图标在方盒上用 box-shadow 对比。
  6. 可选：半透明 background + backdrop-filter: blur(12px) 做毛玻璃条。

常见误区

  • 在含可读文字的大块页面上用很强的 blur()
  • 指望 drop-shadow() 像 box-shadow 一样接受 inset
  • 明明用元素上的 opacity 更清楚，却用 filter: opacity()
  • 不查性能就在大图上每帧 scroll 都 animate 重滤镜
  • 全不透明背景却设 backdrop-filter —— 背后看不见，就没有磨砂效果

小结

  • filter 改绘制像素的外观；布局流不动
  • 在一个值里串联 blur、brightness、contrast、grayscale、saturate 等
  • alpha 形阴影用 drop-shadow()；盒子 elevation 用 box-shadow
  • backdrop-filter 磨砂透过半透明层看到的内容
  • Effects & Motion 在此收尾；下一模块 Modern Toolkit —— 从 CSS Variables 开始

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
6
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 62 的 63
Css 教程