滤镜与混合模式
CSS Filter & Blend Mode
初级网页小程序滤镜与混合模式（CSS Filter & Blend Mode）是让浏览器实时处理元素的视觉效果：filter 可以给图片加模糊、调亮度、去色、换色相，mix-blend-mode 决定一个元素的颜色怎样和它下面的内容合成。不用改原图，就能做出修图软件里的常见效果。
你可能会说：「活动海报的配图能不能直接在网页上调暗一点、变成黑白，鼠标移上去再恢复彩色？不想每次都去修图。」
读之前建议先了解
动手看看给海报实时修图
要点滤镜与混合模式是怎样起作用的？
- 1
filter：给元素加一层实时修图
filter 支持 blur（模糊）、brightness（亮度）、contrast（对比度）、grayscale（灰度）、saturate（饱和度）、hue-rotate（色相旋转）、drop-shadow（投影）等，可以组合使用，比如 filter: grayscale(100%) brightness(80%)。原图文件不变，鼠标悬停时去掉滤镜就恢复原样，还能配合过渡做出渐变效果。
- 2
滤镜会作用到所有子元素
filter 加在一个元素上，它里面的文字、按钮也会一起被处理。常见的错误是把模糊加在整张卡片上，结果标题也糊了；只想处理图片，就把滤镜写在图片本身上。另一个容易踩的坑：加了 filter 的元素会成为里面 position: fixed 元素的定位参照，放在里面的弹窗可能不再相对屏幕定位。阴影方面，box-shadow 沿元素的矩形边界投影，透明背景的图标要用 filter: drop-shadow()，阴影才会贴着图形轮廓。
- 3
mix-blend-mode：和下面的内容合成
混合模式算的是「这一层和下面那一层的颜色怎么合在一起」：multiply（正片叠底）只会变暗，像盖了一层有色胶片；screen（滤色）只会变亮，适合光晕；overlay（叠加）保留明暗层次；difference（差值）让颜色相减反相。结果取决于下面的内容，换一张背景图，效果就跟着变，所以要在真实素材上检查文字是否还看得清。
容易混淆的地方
filter 处理的是元素自己（和子元素）的画面；backdrop-filter（背景模糊）处理的是元素背后透出来的内容，毛玻璃效果用的是后者。混合模式也不同于透明度：opacity 只是让元素变透明，颜色还是原来的颜色；混合模式会按规则重新计算合成后的颜色。
什么时候用
适合用
- 作品集或团队页的照片默认黑白，鼠标悬停时过渡回彩色。
- 活动海报的背景图调暗、轻微模糊，让上面的白色标题更清楚。
- 透明背景的商品图或图标，用 drop-shadow 做贴合轮廓的投影。
不适合用
- 只想让卡片背后的内容变模糊（毛玻璃）时，别用 filter；用 backdrop-filter。
- 大面积、还在不停动画的元素上，别加大半径的 blur；很耗性能，低端手机会卡。
- 要求颜色精确的品牌 Logo，别用混合模式叠在图片上；颜色会随背景变化。
练一练选一个答案，看看解释
你想让海报配图变模糊，好让上面的标题更醒目，于是给整张海报卡片加了 filter: blur(4px)，结果标题也糊了。该怎么改？
让 AI 帮你做复制给 AI Agent 直接用
请用 CSS 滤镜实现【图片的视觉处理，如：团队成员照片默认黑白、悬停恢复彩色】。先阅读相关组件和样式，确认图片元素的结构，以及滤镜要加在哪一层。要求：filter 只加在图片元素本身，不加在包含文字或按钮的容器上；悬停效果用 transition 在 200~400 毫秒内过渡，触屏设备上给出不依赖悬停的展示方式；透明背景图形的阴影用 drop-shadow；注意加了 filter 的元素内部不要放 position: fixed 的弹层；避免在大面积动画元素上使用大半径 blur。不改无关代码。最后说明怎样验证：文字没有被滤镜影响，低端手机上滚动不卡。