前端知识站

简体中文

English

简体中文

English

外观

2025-12-02
2568
11.5m

CSS 滤镜效果：用代码创造视觉魔法 ​

滤镜是什么？ ​

还记得用手机拍照时那些"滤镜"功能吗？一键就能让照片变成黑白、复古、鲜艳或模糊。CSS 滤镜（Filter）把同样的能力带到了网页开发中，让你可以用纯代码实现各种图形效果，无需借助 Photoshop 或其他图片编辑软件。

在 CSS 滤镜出现之前，如果想要一张模糊的图片，你必须用图片编辑软件处理后再上传。如果需要悬停时变亮，就得准备两张图片。现在，一行 CSS 就能搞定：

css
img {
  filter: blur(5px);
}

img:hover {
  filter: brightness(1.2);
}

CSS 滤镜不仅适用于图片，还可以作用于任何 HTML 元素，包括文本、视频、SVG 等。它为网页设计打开了全新的创意空间。

filter 属性基础 ​

filter 属性接受一个或多个滤镜函数，多个滤镜会按顺序叠加应用：

css
.element {
  /* 单个滤镜 */
  filter: blur(5px);

  /* 多个滤镜组合 */
  filter: blur(5px) brightness(1.2) contrast(1.1);

  /* 无滤镜 */
  filter: none;
}

核心滤镜函数详解 ​

blur() - 模糊效果 ​

blur() 函数对元素应用高斯模糊，参数是模糊半径，单位通常是像素：

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

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

.blur-heavy {
  /* 重度模糊（毛玻璃效果） */
  filter: blur(10px);
}

实用场景 - 焦点突出：

css
.gallery img {
  transition: filter 0.3s;
  filter: blur(3px) brightness(0.7);
}

.gallery img:hover {
  /* 悬停时清晰显示 */
  filter: blur(0) brightness(1);
}

.gallery img:not(:hover) {
  /* 未悬停的图片保持模糊 */
  filter: blur(5px) brightness(0.5);
}

这种效果能让用户的注意力集中在悬停的图片上，其他图片自动退居背景。

brightness() - 亮度调整 ​

brightness() 调整元素亮度，参数是倍数或百分比：

  • 1 或 100% 是原始亮度
  • 小于 1 变暗，大于 1 变亮
  • 0 是完全黑色
css
.dim {
  /* 降低亮度到70% */
  filter: brightness(0.7);
}

.bright {
  /* 增加亮度到150% */
  filter: brightness(1.5);
}

.dark-overlay {
  /* 创建暗色遮罩效果 */
  filter: brightness(0.3);
}

实用场景 - 图片悬停增亮：

css
.card img {
  filter: brightness(0.8);
  transition: filter 0.3s;
}

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

contrast() - 对比度调整 ​

contrast() 调整对比度，用法类似 brightness()：

  • 1 或 100% 是原始对比度
  • 小于 1 降低对比度，大于 1 增加对比度
  • 0 是完全灰色
css
.low-contrast {
  /* 柔和的低对比度 */
  filter: contrast(0.7);
}

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

.flat {
  /* 几乎无对比度 */
  filter: contrast(0.3);
}

grayscale() - 灰度效果 ​

grayscale() 将元素转换为灰度图：

  • 0 或 0% 是彩色（无变化）
  • 1 或 100% 是完全灰色
  • 中间值是部分灰度
css
.full-grayscale {
  /* 完全黑白 */
  filter: grayscale(100%);
}

.partial-grayscale {
  /* 50%灰度 */
  filter: grayscale(50%);
}

实用场景 - 已禁用状态：

css
.button {
  filter: grayscale(0%);
  transition: filter 0.3s;
}

.button:disabled {
  filter: grayscale(100%) brightness(0.8);
  cursor: not-allowed;
}

或者创建悬停彩色化效果：

css
.avatar {
  filter: grayscale(100%);
  transition: filter 0.3s;
}

.avatar:hover {
  filter: grayscale(0%);
}

这种效果在团队成员展示、历史照片等场景中很受欢迎。

saturate() - 饱和度调整 ​

saturate() 调整颜色饱和度：

  • 1 或 100% 是原始饱和度
  • 0 是完全去饱和（等同于灰度）
  • 大于 1 增加饱和度，创造鲜艳效果
css
.desaturated {
  /* 减淡颜色 */
  filter: saturate(0.5);
}

.vibrant {
  /* 鲜艳的颜色 */
  filter: saturate(2);
}

.ultra-vibrant {
  /* 极度鲜艳 */
  filter: saturate(3);
}

实用场景 - Instagram 风格滤镜：

css
.filter-vintage {
  filter: saturate(0.6) contrast(1.1) brightness(1.1);
}

.filter-vivid {
  filter: saturate(1.8) contrast(1.2);
}

.filter-fade {
  filter: saturate(0.4) brightness(1.2);
}

sepia() - 褐色效果 ​

sepia() 创建复古的棕褐色调：

  • 0 或 0% 无效果
  • 1 或 100% 完全棕褐色
css
.sepia-photo {
  /* 老照片效果 */
  filter: sepia(100%);
}

.subtle-sepia {
  /* 淡淡的复古感 */
  filter: sepia(30%);
}

hue-rotate() - 色相旋转 ​

hue-rotate() 改变色相，参数是角度：

  • 0deg 无变化
  • 360deg 完整旋转一圈（回到起点）
  • 可以用负值或超过 360 度的值
css
.hue-shift {
  /* 色相偏移90度 */
  filter: hue-rotate(90deg);
}

.hue-opposite {
  /* 色相完全反转 */
  filter: hue-rotate(180deg);
}

实用场景 - 动态变色动画：

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

.rainbow-animation {
  animation: color-shift 10s infinite linear;
}

这在彩虹效果、霓虹灯效果等场景中非常有用。

invert() - 反色效果 ​

invert() 反转颜色：

  • 0 或 0% 无变化
  • 1 或 100% 完全反转
  • 50% 会变成灰色
css
.inverted {
  /* 颜色完全反转 */
  filter: invert(100%);
}

.night-mode {
  /* 夜间模式（反色） */
  filter: invert(90%) hue-rotate(180deg);
}

实用场景 - 简易暗色模式：

css
[data-theme="dark"] {
  filter: invert(1) hue-rotate(180deg);
}

[data-theme="dark"] img,
[data-theme="dark"] video {
  /* 图片和视频再反转一次，恢复原色 */
  filter: invert(1) hue-rotate(180deg);
}

虽然这不是最优雅的暗色模式实现，但对于快速原型很有用。

opacity() - 透明度 ​

opacity() 调整透明度，功能类似 opacity 属性，但作为滤镜可以和其他效果组合：

css
.semi-transparent {
  /* 50%透明度 */
  filter: opacity(50%);
}

.faded {
  /* 淡化效果：降低透明度和饱和度 */
  filter: opacity(60%) saturate(0.7);
}

drop-shadow() - 投影效果 ​

drop-shadow() 类似 box-shadow，但能够跟随元素的实际形状（包括透明区域）：

drop-shadow(x偏移 y偏移 模糊半径 颜色)
css
.shadow-light {
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2));
}

.shadow-heavy {
  filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.4));
}

/* PNG图片的投影 */
.logo {
  /* 会跟随PNG的透明区域 */
  filter: drop-shadow(0 0 10px rgba(0, 100, 255, 0.5));
}

drop-shadow() 与 box-shadow 的关键区别：

css
/* box-shadow：投影是矩形盒子 */
.icon-box-shadow {
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}

/* drop-shadow：投影跟随实际形状 */
.icon-drop-shadow {
  filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.3));
}

对于不规则形状（如 SVG 图标、PNG 图片），drop-shadow() 会创建更自然的阴影。

滤镜组合的艺术 ​

多个滤镜可以组合使用，创造复杂的视觉效果：

css
/* Instagram 风格滤镜 */
.filter-clarendon {
  filter: contrast(1.2) saturate(1.35);
}

.filter-gingham {
  filter: brightness(1.05) hue-rotate(-10deg);
}

.filter-moon {
  filter: grayscale(1) contrast(1.1) brightness(1.1);
}

.filter-lark {
  filter: contrast(0.9) saturate(1.2) brightness(1.1);
}

/* 霓虹发光效果 */
.neon-glow {
  filter: brightness(1.3) contrast(1.2) saturate(1.5) drop-shadow(
      0 0 20px currentColor
    );
}

/* 梦幻模糊 */
.dreamy {
  filter: blur(1px) brightness(1.1) saturate(1.3) contrast(0.9);
}

实战：创建完整的图片滤镜库 ​

css
.image-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.filter-item img {
  width: 100%;
  transition: filter 0.3s;
}

/* 定义各种滤镜 */
.filter-original {
  filter: none;
}

.filter-bw {
  filter: grayscale(100%);
}

.filter-vintage {
  filter: sepia(60%) contrast(1.1) brightness(1.1);
}

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

.filter-warm {
  filter: saturate(1.3) hue-rotate(10deg) brightness(1.05) contrast(1.1);
}

.filter-dramatic {
  filter: contrast(1.5) saturate(0.8) brightness(0.95);
}

.filter-fade {
  filter: brightness(1.15) saturate(0.5) contrast(0.85);
}

.filter-chrome {
  filter: contrast(1.2) saturate(1.5);
}

backdrop-filter：背景滤镜的魔法 ​

backdrop-filter 对元素背后的内容应用滤镜，创造毛玻璃、半透明效果：

css
.glass-effect {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

这是实现现代 UI 设计中流行的"毛玻璃"（Glassmorphism）效果的关键：

css
.glass-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px) saturate(180%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  padding: 24px;
}

/* 暗色版本 */
.glass-card-dark {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(15px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

实用场景 - 导航栏：

css
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px) saturate(180%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

当页面滚动时，内容透过半透明的导航栏显示，同时保持导航栏的可读性。

实战：模态弹窗背景 ​

css
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  padding: 32px;
  max-width: 500px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

性能优化建议 ​

滤镜会影响渲染性能，特别是在移动设备上。以下是一些优化建议：

1. 避免在动画中使用复杂滤镜 ​

css
/* ❌ 性能较差：在动画中频繁改变滤镜 */
.bad-animation {
  animation: heavy-filter 1s infinite;
}

@keyframes heavy-filter {
  from {
    filter: blur(0px);
  }
  to {
    filter: blur(10px);
  }
}

/* ✅ 更好：使用 opacity 或 transform */
.good-animation {
  animation: fade 1s infinite;
}

@keyframes fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.5;
  }
}

2. 使用 will-change 提示浏览器优化 ​

css
.filtered-element {
  filter: blur(5px);
  will-change: filter;
  transition: filter 0.3s;
}

.filtered-element:hover {
  filter: blur(0);
}

3. 对静态内容预渲染 ​

如果滤镜效果是静态的，考虑直接使用处理过的图片而不是 CSS 滤镜：

css
/* 如果这个效果从不改变 */
.always-blurred {
  filter: blur(10px) grayscale(100%);
  /* 考虑改用已处理的图片 */
}

浏览器兼容性 ​

主流浏览器对 filter 的支持良好：

  • Chrome 53+
  • Firefox 49+
  • Safari 9.1+
  • Edge 79+

backdrop-filter 支持较晚：

  • Chrome 76+
  • Firefox 103+（需要开启实验性功能）
  • Safari 9+（带 -webkit- 前缀）
  • Edge 79+

提供回退方案：

css
.glass-effect {
  /* 不支持 backdrop-filter 的回退 */
  background-color: rgba(255, 255, 255, 0.9);
}

@supports (backdrop-filter: blur(10px)) {
  .glass-effect {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
  }
}

常见问题与解决方案 ​

问题 1：滤镜影响子元素 ​

滤镜会应用到元素及其所有子元素：

css
/* ❌ 问题：文字也会模糊 */
.card {
  filter: blur(5px);
}

/* ✅ 解决：使用伪元素或背景图层 */
.card {
  position: relative;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  filter: blur(5px);
  z-index: -1;
}

问题 2：边缘被裁剪 ​

blur() 等滤镜可能导致边缘效果被裁剪：

css
/* ✅ 解决：增加内边距或外边距 */
.blurred {
  filter: blur(10px);
  padding: 10px;
  margin: 10px;
}

问题 3：性能问题 ​

大面积或复杂滤镜会影响性能：

css
/* ✅ 解决：限制滤镜范围，使用硬件加速 */
.optimized {
  filter: blur(5px);
  transform: translateZ(0); /* 强制硬件加速 */
}

总结 ​

CSS 滤镜为网页设计带来了图像处理的能力，让你可以：

  • 实时调整视觉效果无需图片编辑软件
  • 创建交互式效果如悬停变色、禁用灰化
  • 实现现代 UI 设计如毛玻璃效果
  • 构建主题系统通过组合滤镜创造风格

关键要点：

  • 单个滤镜已经很强大，组合使用更能创造惊艳效果
  • backdrop-filter 是现代 UI 设计的利器
  • 注意性能影响，在移动设备上谨慎使用
  • 为不支持的浏览器提供回退方案