CSS 滤镜与混合模式
滤镜和混合模式是 UI 视觉效果的支柱
在现代 Web UI 开发中，磨砂玻璃效果、暗黑主题的图片处理、渐变叠加、阴影效果——这些都离不开 CSS 滤镜和混合模式。CSS 滤镜提供了一套强大的图像处理能力，而混合模式则定义了元素叠加时的颜色计算规则。
理解这两个机制不仅是为了视觉效果，更是为了理解 CSS 在图形处理方面的能力边界。
面试定位：滤镜和混合模式虽然不是面试高频考点，但它们涉及的颜色理论、图层概念和性能注意事项，体现了前端工程师对视觉渲染的深层理解。
CSS 滤镜详解
filter 的十种效果函数
.filter-demo {
/* 1. blur — 高斯模糊 */
filter: blur(5px);
/* 2. brightness — 亮度调整 */
filter: brightness(1.2); /* 120% */
filter: brightness(0.5); /* 50% 变暗 */
/* 3. contrast — 对比度调整 */
filter: contrast(150%); /* 增加对比 */
filter: contrast(0.8); /* 降低对比 */
/* 4. grayscale — 灰度转换 */
filter: grayscale(100%); /* 完全灰度 */
filter: grayscale(0.5); /* 50% 灰度 */
/* 5. sepia — 棕褐色调（复古照片） */
filter: sepia(80%);
filter: sepia(1); /* 完全 sepia */
/* 6. hue-rotate — 色相旋转 */
filter: hue-rotate(90deg); /* 旋转 90 度 */
filter: hue-rotate(180deg); /* 色相反转（类似 invert） */
filter: hue-rotate(270deg); /* -90 度 */
/* 7. invert — 反相 */
filter: invert(100%); /* 完全反相 */
filter: invert(0.5); /* 50% 反相 */
/* 8. opacity — 透明度（与 CSS opacity 不同，滤镜版本可被硬件加速） */
filter: opacity(0.8);
/* 9. saturate — 饱和度 */
filter: saturate(200%); /* 过度饱和 */
filter: saturate(0); /* 完全去饱和（类似 grayscale） */
/* 10. drop-shadow — 投影（与 box-shadow 不同，能沿图像 alpha 通道） */
filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.3));
}
滤镜的组合使用
.combined {
/* 多个滤镜可以组合，用空格分隔 */
filter: blur(2px) brightness(1.1) contrast(1.2);
/* 注意：顺序会影响结果 */
filter: grayscale(100%) brightness(1.2); /* 先灰度再提亮 */
filter: brightness(1.2) grayscale(100%); /* 先提亮再灰度 */
}
drop-shadow vs box-shadow
.comparison {
padding: 20px;
}
/* box-shadow：沿 border-box 投影 */
.box-shadow {
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}
/* drop-shadow：沿图像 alpha 通道投影 */
.drop-shadow {
filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.3));
}
关键区别：对于 PNG 图标或有透明度的元素，box-shadow 只会在元素边界投影，而 drop-shadow 会沿图像的实际形状投影。
混合模式（Blend Modes）
mix-blend-mode
mix-blend-mode 定义元素内容与背景的混合方式：
.blend {
mix-blend-mode: normal; /* 默认：正常叠加 */
mix-blend-mode: multiply; /* 正片叠底 */
mix-blend-mode: screen; /* 滤色 */
mix-blend-mode: overlay; /* 叠加 */
mix-blend-mode: darken; /* 变暗 */
mix-blend-mode: lighten; /* 变亮 */
mix-blend-mode: color-dodge; /* 颜色减淡 */
mix-blend-mode: color-burn; /* 颜色加深 */
mix-blend-mode: hard-light; /* 强光 */
mix-blend-mode: soft-light; /* 柔光 */
mix-blend-mode: difference; /* 差值 */
mix-blend-mode: exclusion; /* 排除 */
mix-blend-mode: hue; /* 色相 */
mix-blend-mode: saturation; /* 饱和度 */
mix-blend-mode: color; /* 颜色 */
mix-blend-mode: luminosity; /* 亮度 */
}
常用混合模式的应用
/* 1. 文字覆盖在图片上（文字反白效果） */
.text-on-image {
position: relative;
}
.text-on-image::after {
content: attr(data-text);
position: absolute;
inset: 0;
background: black;
color: white;
mix-blend-mode: difference; /* 文字自动反白 */
}
/* 2. 双色调图片效果 */
.duotone {
position: relative;
}
.duotone::before {
content: "";
position: absolute;
inset: 0;
background: #00ff00; /* 替换为高光色 */
mix-blend-mode: multiply;
}
/* 3. 磨砂玻璃效果 */
.frosted-glass {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
background-blend-mode
针对多背景图像的混合模式：
.multi-bg {
background-image:
url(texture.png),
linear-gradient(45deg, #ff0000, #0000ff);
background-blend-mode: overlay; /* 两层背景混合 */
}
isolation 层叠隔离
isolation 的作用
isolation 强制创建一个新的层叠上下文，阻止混合模式向外部传播：
.isolate {
isolation: isolate; /* 创建新的层叠上下文 */
/* 相当于 isolation: isolate 的元素会成为混合的边界 */
}
实际应用：避免混合模式污染
/* 问题：.blended 的混合模式会影响外部 */
.page {
background: url(pattern.png);
}
.blended {
background: red;
mix-blend-mode: multiply;
}
/* 解决方案：隔离混合上下文 */
.isolated-container {
isolation: isolate;
}
.isolated-container .blended {
background: red;
mix-blend-mode: multiply;
/* 混合只在这个容器内部发生 */
}
backdrop-filter 背景滤镜
磨砂玻璃效果
.glass {
backdrop-filter: blur(10px); /* 模糊 */
backdrop-filter: saturate(180%) blur(10px); /* 模糊+饱和 */
backdrop-filter: brightness(0.8) contrast(120%); /* 调色 */
-webkit-backdrop-filter: blur(10px); /* Safari 需要前缀 */
}
注意事项
/* backdrop-filter 的性能考量 */
/* 好：少量使用 */
.good-glass {
backdrop-filter: blur(10px);
}
/* 坏：大量使用或动画 */
.bad {
animation: glass-shimmer {
backdrop-filter: blur(10px); /* 性能问题 */
}
}
/* 更好的做法：使用 will-change */
.optimized {
backdrop-filter: blur(10px);
will-change: backdrop-filter;
}
实战：常见视觉效果
1. 图片灰度 + hover 彩色
.image {
filter: grayscale(100%);
transition: filter 0.3s ease;
}
.image:hover {
filter: grayscale(0%);
}
2. 文字描边效果
.outline-text {
color: transparent;
-webkit-text-stroke: 1px white;
text-stroke: 1px white;
}
3. 复古照片效果
.vintage {
filter: sepia(40%) contrast(110%) brightness(90%) saturate(85%);
}
4. 霓虹发光效果
.neon {
color: black;
text-shadow:
0 0 5px white,
0 0 10px cyan,
0 0 20px cyan,
0 0 40px cyan;
}
面试高频问题
Q: filter 和 opacity 有什么区别？
回答要点：opacity 改变整个元素的透明度，包括背景和边框；filter: opacity() 作用于元素的内容（可能包含子元素）。更重要的是，filter 版本可以利用浏览器的硬件加速，在某些场景下性能更好。但两者在视觉效果上基本一致。
Q: mix-blend-mode 和 background-blend-mode 有什么区别？
回答要点：mix-blend-mode 作用于元素内容与整个背景的混合；background-blend-mode 只作用于元素的多层背景图像之间的混合。简单说：mix-blend-mode 是元素与外部的混合，background-blend-mode 是背景图像之间的混合。
Q: isolation: isolate 解决了什么问题？
回答要点：isolation: isolate 强制创建一个新的层叠上下文，阻止混合模式向外部传播。这在需要限制混合模式作用范围时非常有用，比如在一个有混合背景的页面上，某些组件不想被背景的混合模式影响。