11滤镜与混合

CSS 滤镜（filter）让元素能模糊、变色、变灰阶； backdrop-filter 给「背后」染色做毛玻璃； mix-blend-mode 让元素像 Photoshop 图层那样互相混合； background-blend-mode 让背景图和背景色互相混合。 四种「图层效果」一次讲清——从此告别图片处理软件，CSS 自己就是滤镜工厂。

约 17 分钟 6 个动手实验 filter / blend

一、filter 滤镜函数链

filter 接受一串函数链，从左到右依次作用在元素自身上。 函数之间用空格分隔，多个函数叠加就得到「先模糊、再调亮、最后转灰度」这种组合效果—— 完全无需打开 Photoshop。

filter 九函数速查：函数 / 作用 / 参数范围 / 默认值
函数作用参数范围默认值
blur()高斯模糊长度，0 起无上限0
brightness()亮度数字，0 全黑、1 原色1
contrast()对比度数字，0 全灰、1 原色1
grayscale()灰度0~1，1 黑白照0
sepia()褐色 / 复古0~1，1 老照片0
saturate()饱和度数字，0 去色、>1 更艳1
hue-rotate()色相旋转角度，0deg~360deg0deg
invert()反色0~1，1 照片底片0
opacity()透明度0~1，与 opacity 属性类似但只过滤镜链1
九宫格九滤镜对照：同一张彩色卡，左上原图、右下反色 —— 改 .b14 的 blur() 数值看模糊半径变化
filter: opacity(.5) 与 opacity: .5 看起来一样， 但 opacity 属性是「整元素半透」，而 filter 里的 opacity() 只在滤镜链里生效——二者性能、合成层归属都不相同。

二、backdrop-filter：背景模糊（毛玻璃）

backdrop-filter 给元素背后的内容加滤镜—— 注意是「背后」，不是「自身」。iOS 的通知中心、Windows 11 的 Acrylic 半透明效果，都是这一招。套路只有两步： 背景半透明 + backdrop-filter 模糊。

同一背景图两张卡片：左边纯实色（透不出），右边毛玻璃（看背后色块被模糊）——把 .fb-glass-stage .card.bot 的 backdrop-filter 改成 none 看效果消失
毛玻璃之所以是「毛」的，背景必须半透明—— 写成 background: #FFF 不透明，背后的内容就完全看不见，模糊也没意义。 通常 rgba(255,255,255,.4 ~ .6) 是甜区。

三、filter vs backdrop-filter 区别

一句话概括：filter 改自身，backdrop-filter 改背后。 二者可以同时写在一个元素上，互不冲突——但要注意 backdrop-filter 要求元素有半透明背景，否则看不到效果。

filter vs backdrop-filter 对比：作用对象 / 性能 / 常见场景
对比项filterbackdrop-filter
作用对象元素自身（含子元素）元素背后的内容
背景需要半透明吗不需要必须，否则看不到背后
典型场景图片调色、hover 滤镜、故障特效毛玻璃顶栏、modal 背景、艺术字
性能合成层 GPU略贵，需额外合成层计算
兼容性全主流浏览器Safari 需 -webkit- 前缀
左：filter 改自己变模糊；右：backdrop-filter 让自己清晰、让背后模糊 —— 把 .card-a 改成 filter: none 看它瞬间清晰

四、mix-blend-mode：图层混合模式

mix-blend-mode 让元素像 Photoshop 图层那样与背后的内容互相混合—— 经典用途：故障艺术字（difference）、海报大字压图（multiply）、 亮色叠加（screen）。共有 15 种混合模式，常用的就那四五个。

mix-blend-mode 15 种模式速查：名字 / 作用 / 典型用法
分类模式一句话作用
变暗系multiply两色相乘，越叠越深；海报字压图神器
变暗系darken取两者较暗像素
变暗系color-burn加深对比，烧焦感
变亮系screen反相后相乘，越叠越亮；霓虹字
变亮系lighten取两者较亮像素
变亮系color-dodge提亮对比，曝光感
对比系overlay深更深、浅更浅（multiply + screen）
对比系hard-lightoverlay 的「图层位置互换版」
对比系soft-lightoverlay 的柔化版
反相比对difference两色相减取绝对值；故障风经典
反相比对exclusion比 difference 对比度低
分量hue只取一方的色相
分量saturation只取一方的饱和度
分量color取色相+饱和度，留亮度
分量luminosity取亮度，留色相+饱和度
四个色块演示四种混合：红绿球重叠处 multiply 变暗、screen 变亮、overlay 加强对比、difference 反相 —— 把 .item.d .green 的 mix-blend-mode 改成 normal 看分离
海报大字压图的两大套路：mix-blend-mode: multiply（深色字压浅图） 或 mix-blend-mode: screen（亮色字压深图）。原理就是「深更深」与「浅更浅」。

五、background-blend-mode：背景图与色混合

background-blend-mode 只作用于元素自身的多个背景层之间—— 把 background-image 与 background-color 互相混合。 最常见的用法是给图片加暗色蒙版：底层 url(图)，顶层 linear-gradient(深色)，二者用 multiply 混合。

左：原图无蒙版（暖色球拼贴）；右：同一图层叠暗色渐变 + multiply 混合 —— 把右边 background-blend-mode 改成 screen 看变亮
background-blend-mode 只在「一个元素内」的多个背景层之间生效—— 想要「跨元素」混合（例如两张图互相叠加），请用上一节的 mix-blend-mode。

六、isolation: isolate 隔离混合上下文

默认情况下，mix-blend-mode 会穿透到所有祖先与背景混合—— 这是 99% 串色事故的来源。isolation: isolate 会创建独立的堆叠上下文， 把混合效果关在父级盒子里，不再污染外面的兄弟元素。

左栏没加 isolation：混合窜到框外与背后灰色融合；右栏加了 isolate：混合被关进框内 —— 把 .col.iso 的 isolation 删掉看污染
「我给一个元素加了 mix-blend-mode，结果全站颜色都变了」—— 99% 是忘了写 isolation: isolate。使用 mix-blend-mode 的同时， 一定给它最近的「应该被影响的祖先」加 isolation: isolate。

七、组合实战：故障风艺术字 + 毛玻璃卡片 + 颜色循环图标

真实项目里这三种效果常常同时登场： 顶部 mix-blend-mode: difference 故障艺术字（白字压任意背景自动反相）、 中部 backdrop-filter 毛玻璃信息卡、 底部 filter: hue-rotate 颜色循环的图标群。

综合三件套：故障字（mix-blend-mode: difference）+ 毛玻璃卡（backdrop-filter）+ 颜色循环徽章（hue-rotate 动画）—— 把 .fb-combo .glitch 的 mix-blend-mode 改成 multiply 看文字颜色变化
三件套的关键技巧：故障字 + 反色背景、毛玻璃 + 半透明背景、 颜色循环 + hue-rotate。三者都用了本章讲的滤镜/混合语法，但用法完全不同， 不要互相替代。

八、本章小结

  • filter 给元素自身加滤镜，9 种函数可链式叠加；常用 blur / grayscale / hue-rotate。
  • backdrop-filter 给元素背后的内容加滤镜，必须配半透明背景才能看到效果，毛玻璃标配。
  • mix-blend-mode 让元素与背后内容像 Photoshop 图层那样混合；multiply 压图、screen 亮字、difference 故障风。
  • background-blend-mode 只在元素自身的多个背景层之间混合；图片暗色蒙版神器。
  • 使用 mix-blend-mode 必加 isolation: isolate 防止混合窜色到全站。
  • 四件套性能开销：backdrop-filter 最贵，整页别超过两三处；filter 走 GPU 合成层很省。
动手练习（三件套）：①给页面顶栏加 backdrop-filter: blur(16px) + 半透明背景做毛玻璃； ②给 hero 大标题加 mix-blend-mode: difference 做故障艺术字（白字配任意背景都行）； ③给 banner 图加 background-blend-mode: multiply 叠暗色渐变做暗色蒙版。 最后 F12 → Computed → 搜 filter 看看哪些属性被激活。