轩辕李的博客
轩辕李
2019-03-20
目录

CSS进阶-滤镜与混合模式

CSS滤镜（Filter）和混合模式（Blend Mode）是实现丰富视觉效果的强大工具。它们能让你轻松创建模糊、颜色调整、图层混合等效果，而无需依赖图片编辑软件。

本文将系统介绍CSS滤镜函数、混合模式以及它们在实际项目中的应用技巧。

# 一、CSS滤镜（Filter）

# 1.1 filter属性概述

filter 属性对元素应用图形效果，如模糊、颜色偏移等。

/* 基础语法 */
.element {
  filter: <filter-function>;
}

/* 多个滤镜（按顺序应用） */
.element {
  filter: blur(5px) brightness(1.2) contrast(1.1);
}

/* 移除滤镜 */
.element {
  filter: none; /* 默认值 */
}

# 1.2 blur（模糊）

创建高斯模糊效果。

/* 语法：blur(radius) */

/* 轻微模糊 */
.blur-light {
  filter: blur(2px);
}

/* 中度模糊 */
.blur-medium {
  filter: blur(5px);
}

/* 重度模糊 */
.blur-heavy {
  filter: blur(10px);
}

/* 实战：背景模糊（毛玻璃效果） */
.glass-effect {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 实战：图片加载时的模糊占位 */
.lazy-image {
  filter: blur(20px);
  transition: filter 0.3s ease;
}

.lazy-image.loaded {
  filter: blur(0);
}

# 1.3 brightness（亮度）

调整图像亮度。

/* 语法：brightness(amount) */
/* 0 = 全黑，1 = 原始，>1 = 更亮 */

/* 变暗 */
.darker {
  filter: brightness(0.5); /* 50%亮度 */
}

/* 正常 */
.normal {
  filter: brightness(1); /* 100%亮度 */
}

/* 变亮 */
.brighter {
  filter: brightness(1.5); /* 150%亮度 */
}

/* 实战：悬停时变亮 */
.card {
  filter: brightness(0.9);
  transition: filter 0.3s ease;
}

.card:hover {
  filter: brightness(1.1);
}

/* 实战：夜间模式调暗 */
.night-mode img {
  filter: brightness(0.7);
}

# 1.4 contrast（对比度）

调整图像对比度。

/* 语法：contrast(amount) */
/* 0 = 灰色，1 = 原始，>1 = 更高对比度 */

/* 降低对比度 */
.low-contrast {
  filter: contrast(0.5);
}

/* 正常对比度 */
.normal-contrast {
  filter: contrast(1);
}

/* 增强对比度 */
.high-contrast {
  filter: contrast(1.5);
}

/* 实战：增强文字清晰度 */
.sharp-text {
  filter: contrast(1.2) brightness(1.1);
}

/* 实战：弱化背景图 */
.background-image {
  filter: contrast(0.8) brightness(0.9);
}

# 1.5 grayscale（灰度）

将图像转换为灰度。

/* 语法：grayscale(amount) */
/* 0 = 彩色，1 = 完全灰度 */

/* 彩色 */
.color {
  filter: grayscale(0);
}

/* 部分灰度 */
.semi-gray {
  filter: grayscale(0.5);
}

/* 完全灰度 */
.full-gray {
  filter: grayscale(1);
}

/* 实战：图片悬停时彩色 */
.image-gray {
  filter: grayscale(1);
  transition: filter 0.3s ease;
}

.image-gray:hover {
  filter: grayscale(0);
}

/* 实战：禁用状态 */
button:disabled {
  filter: grayscale(1);
  opacity: 0.6;
  cursor: not-allowed;
}

# 1.6 sepia（褐色/复古）

给图像添加褐色调，产生复古照片效果。

/* 语法：sepia(amount) */
/* 0 = 无效果，1 = 完全褐色 */

/* 轻微复古 */
.vintage-light {
  filter: sepia(0.3);
}

/* 中度复古 */
.vintage-medium {
  filter: sepia(0.6);
}

/* 完全复古 */
.vintage-full {
  filter: sepia(1);
}

/* 实战：老照片效果 */
.old-photo {
  filter: sepia(0.8) contrast(1.2) brightness(0.9);
}

# 1.7 saturate（饱和度）

调整图像颜色饱和度。

/* 语法：saturate(amount) */
/* 0 = 完全不饱和（灰度），1 = 原始，>1 = 过饱和 */

/* 降低饱和度 */
.desaturate {
  filter: saturate(0.5);
}

/* 正常饱和度 */
.normal-saturate {
  filter: saturate(1);
}

/* 增强饱和度 */
.over-saturate {
  filter: saturate(2);
}

/* 实战：鲜艳的图片 */
.vibrant {
  filter: saturate(1.5) contrast(1.1);
}

/* 实战：柔和的配色 */
.soft-colors {
  filter: saturate(0.7);
}

# 1.8 hue-rotate（色相旋转）

旋转图像色相环。

/* 语法：hue-rotate(angle) */
/* 0deg = 原始，360deg = 旋转一圈回到原始 */

/* 旋转90度 */
.hue-90 {
  filter: hue-rotate(90deg);
}

/* 旋转180度（反色效果） */
.hue-180 {
  filter: hue-rotate(180deg);
}

/* 完整一圈 */
.hue-360 {
  filter: hue-rotate(360deg); /* 回到原始 */
}

/* 实战：动态色相变化 */
.color-shift {
  animation: hue-shift 3s linear infinite;
}

@keyframes hue-shift {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

/* 实战：主题变色 */
.theme-blue {
  filter: hue-rotate(0deg);
}

.theme-green {
  filter: hue-rotate(60deg);
}

.theme-purple {
  filter: hue-rotate(-60deg);
}

# 1.9 invert（反转）

反转图像颜色。

/* 语法：invert(amount) */
/* 0 = 原始，1 = 完全反转 */

/* 原始 */
.normal {
  filter: invert(0);
}

/* 部分反转 */
.semi-invert {
  filter: invert(0.5);
}

/* 完全反转 */
.full-invert {
  filter: invert(1);
}

/* 实战：暗黑模式图标 */
.dark-mode .icon {
  filter: invert(1);
}

/* 实战：负片效果 */
.negative {
  filter: invert(1) hue-rotate(180deg);
}

# 1.10 opacity（透明度）

调整图像透明度（与 opacity 属性类似，但在滤镜中可组合）。

/* 语法：opacity(amount) */
/* 0 = 完全透明，1 = 完全不透明 */

/* 半透明 */
.semi-transparent {
  filter: opacity(0.5);
}

/* 实战：组合滤镜 */
.faded-image {
  filter: opacity(0.8) grayscale(0.3) blur(1px);
}

/* vs 普通opacity属性 */
.element {
  opacity: 0.5; /* 包括子元素都会半透明 */
}

.element {
  filter: opacity(0.5); /* 仅元素本身，可与其他滤镜组合 */
}

# 1.11 drop-shadow（投影）

为元素添加投影，类似 box-shadow 但遵循元素形状（包括透明区域）。

/* 语法：drop-shadow(offset-x offset-y blur-radius color) */

/* 基础投影 */
.shadow {
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
}

/* 多重投影 */
.multi-shadow {
  filter: 
    drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3))
    drop-shadow(-2px -2px 4px rgba(255, 255, 255, 0.5));
}

/* drop-shadow vs box-shadow */
.box-shadow-demo {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  /* 投影是矩形，不考虑透明区域 */
}

.drop-shadow-demo {
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
  /* 投影跟随PNG图片的实际形状 */
}

/* 实战：图标投影 */
.icon {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* 实战：发光效果 */
.glow {
  filter: 
    drop-shadow(0 0 10px currentColor)
    drop-shadow(0 0 20px currentColor);
}

# 1.12 url（SVG滤镜）

引用SVG滤镜进行更复杂的效果。

<!-- SVG滤镜定义 -->
<svg style="display: none;">
  <defs>
    <filter id="turbulence">
      <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence"/>
      <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="20" xChannelSelector="R" yChannelSelector="G"/>
    </filter>
  </defs>
</svg>

/* 使用SVG滤镜 */
.distorted {
  filter: url(#turbulence);
}

/* 组合SVG滤镜和CSS滤镜 */
.combined {
  filter: url(#turbulence) blur(2px);
}

# 1.13 backdrop-filter（背景滤镜）

对元素背景区域应用滤镜（毛玻璃效果）。

/* 毛玻璃效果 */
.glass {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* iOS风格毛玻璃 */
.ios-glass {
  backdrop-filter: blur(20px) saturate(180%);
  background: rgba(255, 255, 255, 0.7);
}

/* 实战：模态框背景 */
.modal-backdrop {
  backdrop-filter: blur(5px) brightness(0.7);
  background: rgba(0, 0, 0, 0.3);
}

/* 实战：导航栏 */
.navbar {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

# 二、混合模式（Blend Mode）

# 2.1 mix-blend-mode（元素混合模式）

定义元素内容如何与其背景混合。

/* 语法 */
.element {
  mix-blend-mode: <blend-mode>;
}

/* 混合模式值 */
.normal      { mix-blend-mode: normal; }      /* 正常（默认） */
.multiply    { mix-blend-mode: multiply; }    /* 正片叠底 */
.screen      { mix-blend-mode: screen; }      /* 滤色 */
.overlay     { mix-blend-mode: overlay; }     /* 叠加 */
.darken      { mix-blend-mode: darken; }      /* 变暗 */
.lighten     { mix-blend-mode: lighten; }     /* 变亮 */
.color-dodge { mix-blend-mode: color-dodge; } /* 颜色减淡 */
.color-burn  { mix-blend-mode: color-burn; }  /* 颜色加深 */
.hard-light  { mix-blend-mode: hard-light; }  /* 强光 */
.soft-light  { mix-blend-mode: soft-light; }  /* 柔光 */
.difference  { mix-blend-mode: difference; }  /* 差值 */
.exclusion   { mix-blend-mode: exclusion; }   /* 排除 */
.hue         { mix-blend-mode: hue; }         /* 色相 */
.saturation  { mix-blend-mode: saturation; }  /* 饱和度 */
.color       { mix-blend-mode: color; }       /* 颜色 */
.luminosity  { mix-blend-mode: luminosity; }  /* 明度 */

# multiply（正片叠底）

/* 让颜色变暗，白色变为透明 */
.multiply-text {
  mix-blend-mode: multiply;
  color: #333;
}

/* 实战：文字与图片融合 */
.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  font-weight: bold;
  color: white;
  mix-blend-mode: multiply;
}

# screen（滤色）

/* 让颜色变亮，黑色变为透明 */
.screen-effect {
  mix-blend-mode: screen;
}

/* 实战：光效叠加 */
.light-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,255,255,0.5) 0%, transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
}

# overlay（叠加）

/* 结合multiply和screen，增强对比度 */
.overlay-effect {
  mix-blend-mode: overlay;
}

/* 实战：图片滤镜 */
.photo-filter {
  position: relative;
}

.photo-filter::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  mix-blend-mode: overlay;
  opacity: 0.6;
}

# difference（差值）

/* 创建反差效果 */
.difference-effect {
  mix-blend-mode: difference;
  color: white;
}

/* 实战：动态文字效果 */
.dynamic-text {
  position: relative;
  font-size: 4rem;
  font-weight: bold;
  color: white;
  mix-blend-mode: difference;
}

# color（颜色）

/* 保留底层的明度，应用上层的色相和饱和度 */
.color-blend {
  mix-blend-mode: color;
}

/* 实战：图片着色 */
.colorize {
  position: relative;
}

.colorize::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ff6b6b;
  mix-blend-mode: color;
}

# 2.2 background-blend-mode（背景混合模式）

定义元素的背景图片与背景颜色如何混合。

/* 基础语法 */
.element {
  background-image: url('image.jpg');
  background-color: #ff6b6b;
  background-blend-mode: multiply;
}

/* 多重背景混合 */
.multi-bg {
  background-image: 
    url('overlay.png'),
    url('background.jpg');
  background-blend-mode: screen, normal;
  /* 第一张图片用screen，第二张用normal */
}

/* 实战：双色调效果 */
.duotone {
  background-image: 
    linear-gradient(#ff6b6b, #4ecdc4),
    url('photo.jpg');
  background-blend-mode: multiply;
  background-size: cover;
}

/* 实战：纹理叠加 */
.texture-overlay {
  background-image: 
    url('texture.png'),
    linear-gradient(to bottom, #667eea, #764ba2);
  background-blend-mode: overlay;
}

/* 实战：彩色渐变遮罩 */
.gradient-mask {
  background-image: 
    linear-gradient(45deg, rgba(255,107,107,0.8), rgba(78,205,196,0.8)),
    url('image.jpg');
  background-blend-mode: color;
  background-size: cover;
  background-position: center;
}

# 2.3 isolation（隔离）

创建新的堆叠上下文，阻止混合模式影响外部元素。

/* 默认：不隔离 */
.no-isolation {
  isolation: auto;
}

/* 隔离混合 */
.isolated {
  isolation: isolate;
}

/* 实战：控制混合范围 */
.blend-container {
  isolation: isolate; /* 内部的混合模式不影响外部 */
}

.blend-container .blend-element {
  mix-blend-mode: multiply;
  /* 仅与容器内的元素混合 */
}

# 三、实战案例

# 3.1 毛玻璃卡片

# 3.2 图片滤镜效果

# 3.3 混合模式文字效果

# 3.4 双色调图片效果

# 3.5 动态滤镜切换

# 四、性能优化与最佳实践

# 4.1 性能考虑

/* ✅ 推荐：使用GPU加速的滤镜 */
.optimized {
  filter: blur(5px) brightness(1.2);
  /* blur、opacity等会触发GPU加速 */
}

/* ✅ 推荐：使用will-change提示浏览器 */
.animated-filter {
  will-change: filter;
  filter: blur(0);
  transition: filter 0.3s ease;
}

.animated-filter:hover {
  filter: blur(5px);
}

/* ❌ 避免：过度使用复杂滤镜 */
.too-many-filters {
  filter: 
    blur(5px) 
    brightness(1.2) 
    contrast(1.1) 
    saturate(1.5) 
    hue-rotate(30deg)
    drop-shadow(0 0 10px red)
    drop-shadow(0 0 20px blue);
  /* 过多滤镜会影响性能 */
}

/* ✅ 推荐：适度组合 */
.reasonable-filters {
  filter: blur(3px) brightness(1.1);
}

/* ❌ 避免：在大面积元素上使用backdrop-filter */
.bad-backdrop {
  backdrop-filter: blur(20px);
  width: 100vw;
  height: 100vh;
  /* 在整个视口使用会非常耗性能 */
}

/* ✅ 推荐：限制使用范围 */
.good-backdrop {
  backdrop-filter: blur(10px);
  width: 400px;
  height: 300px;
}

# 4.2 浏览器兼容性处理

/* 提供降级方案 */
.glass-card {
  background: rgba(255, 255, 255, 0.8); /* 不支持时的备用 */
  backdrop-filter: blur(10px);
}

/* 使用@supports检测 */
@supports (backdrop-filter: blur(10px)) {
  .glass-card {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
  }
}

@supports not (backdrop-filter: blur(10px)) {
  .glass-card {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  }
}

/* 检测混合模式支持 */
@supports (mix-blend-mode: multiply) {
  .blend-text {
    mix-blend-mode: multiply;
  }
}

# 4.3 可访问性

/* 尊重用户的减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  .animated-filter {
    transition: none;
  }
  
  .color-shift {
    animation: none;
  }
}

/* 确保文本可读性 */
.text-with-filter {
  filter: brightness(1.2);
}

/* 如果滤镜影响可读性，提供备用方案 */
@media (prefers-contrast: high) {
  .text-with-filter {
    filter: none;
    color: #000;
    background: #fff;
  }
}

/* 避免过度使用可能导致眩晕的效果 */
.safe-animation {
  /* 避免快速闪烁、旋转的滤镜效果 */
  animation: subtle-shift 3s ease-in-out infinite;
}

@keyframes subtle-shift {
  0%, 100% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(10deg); }
}

# 4.4 实用技巧

/* 1. 组合滤镜创建效果 */
.instagram-filter {
  filter: contrast(1.1) brightness(1.1) saturate(1.3);
}

/* 2. 使用CSS变量动态控制 */
:root {
  --blur-amount: 0px;
  --brightness: 1;
}

.dynamic-filter {
  filter: blur(var(--blur-amount)) brightness(var(--brightness));
  transition: filter 0.3s ease;
}

/* JavaScript: element.style.setProperty('--blur-amount', '5px') */

/* 3. 创建可重用的滤镜类 */
.filter-vintage {
  filter: sepia(0.5) contrast(1.2) brightness(0.9);
}

.filter-cool {
  filter: saturate(1.3) hue-rotate(20deg) brightness(1.05);
}

.filter-warm {
  filter: saturate(1.2) hue-rotate(-20deg) brightness(1.1);
}

/* 4. 响应式滤镜 */
@media (max-width: 768px) {
  .mobile-optimized {
    filter: none; /* 移动端禁用滤镜以提升性能 */
  }
}

@media (min-width: 769px) {
  .mobile-optimized {
    filter: blur(5px) brightness(1.2);
  }
}

/* 5. 打印样式 */
@media print {
  .no-print-filter {
    filter: none !important;
    /* 打印时移除滤镜，确保清晰度 */
  }
}

# 4.5 常见错误

❌ 错误做法：

/* 1. 过度模糊导致不可读 */
.bad-blur {
  filter: blur(20px);
  /* 文字完全不可读 */
}

/* 2. 滤镜影响性能 */
* {
  filter: brightness(1.1);
  /* 对所有元素应用滤镜 */
}

/* 3. 忘记transition */
.no-transition {
  filter: grayscale(0);
}

.no-transition:hover {
  filter: grayscale(1);
  /* 变化太突兀 */
}

/* 4. mix-blend-mode在白色背景失效 */
.white-bg-blend {
  background: white;
  color: white;
  mix-blend-mode: multiply;
  /* 白色multiply白色还是白色，看不见 */
}

✅ 正确做法：

/* 1. 适度模糊 */
.good-blur {
  filter: blur(3px);
  /* 保持可读性 */
}

/* 2. 限制滤镜范围 */
.image-container img {
  filter: brightness(1.1);
  /* 仅对图片应用 */
}

/* 3. 添加过渡效果 */
.smooth-transition {
  filter: grayscale(0);
  transition: filter 0.3s ease;
}

.smooth-transition:hover {
  filter: grayscale(1);
}

/* 4. 使用对比色 */
.good-blend {
  background: linear-gradient(45deg, #667eea, #764ba2);
  color: white;
  mix-blend-mode: multiply;
}

# 五、浏览器兼容性

# 5.1 filter属性

特性 Chrome Firefox Safari Edge
filter 基础 ✅ 53+ ✅ 35+ ✅ 9.1+ ✅ 79+
-webkit-filter ✅ 18-52 ❌ ✅ 6-9 ❌
backdrop-filter ✅ 76+ ✅ 103+ ✅ 9+ (-webkit-) ✅ 79+
drop-shadow() ✅ 53+ ✅ 35+ ✅ 9.1+ ✅ 79+

# 5.2 混合模式

特性 Chrome Firefox Safari Edge
mix-blend-mode ✅ 41+ ✅ 32+ ✅ 8+ ✅ 79+
background-blend-mode ✅ 35+ ✅ 30+ ✅ 8+ ✅ 79+
isolation ✅ 41+ ✅ 36+ ✅ 8+ ✅ 79+

# 5.3 前缀处理

/* backdrop-filter需要-webkit-前缀（Safari） */
.glass {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* 旧版Chrome需要-webkit-前缀的filter */
.legacy-filter {
  -webkit-filter: blur(5px);
  filter: blur(5px);
}

# 六、总结

# 核心要点

  1. CSS滤镜：

    • 11种滤镜函数：blur、brightness、contrast、grayscale、sepia、saturate、hue-rotate、invert、opacity、drop-shadow、url
    • backdrop-filter 实现毛玻璃效果
    • 可组合使用多个滤镜
    • 支持动画和过渡

  2. 混合模式：

    • mix-blend-mode：元素与背景混合
    • background-blend-mode：背景图层混合
    • 16种混合模式，模拟Photoshop效果
    • isolation 控制混合范围

  3. 性能优化：

    • 适度使用滤镜，避免过度叠加
    • 大面积元素慎用 backdrop-filter
    • 使用 will-change 提示GPU加速
    • 移动端考虑禁用复杂滤镜

  4. 最佳实践：

    • 提供降级方案（@supports）
    • 尊重用户偏好（prefers-reduced-motion）
    • 确保可访问性（对比度、可读性）
    • 使用CSS变量实现动态控制

  5. 常见应用：

    • 毛玻璃效果（backdrop-filter）
    • 图片滤镜（Instagram风格）
    • 双色调效果（background-blend-mode）
    • 文字混合（mix-blend-mode）

掌握CSS滤镜和混合模式，能够让你的网页视觉效果更加丰富多彩，创造出专业级的设计效果。

祝你变得更强!

编辑 (opens new window)
#CSS
上次更新: 2025/11/21
CSS进阶-Transform与3D变换
现代CSS-CSS预处理器对比

← 现代CSS-CSS预处理器对比→

最近更新
01
AI编程时代的一些心得
09-11
02
Claude Code与Codex的协同工作
09-01
03
Claude Code 最佳实践（个人版）
08-01
更多文章>
Theme by Vdoing | Copyright © 2018-2025 京ICP备2021021832号-2 | MIT License