1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

/* 关键字：不施加任何滤镜（初始值） */
filter: none;

/* 单个滤镜函数 */
filter: blur(5px);

/* 多个滤镜函数：用空格分隔，按书写顺序从左到右依次作用 */
filter: contrast(175%) brightness(120%);

/* 引用 SVG <filter> 中定义的滤镜 */
filter: url("filters.svg#my-filter");

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

/* blur() 滤镜的基本用法 */

/* 轻微模糊：1px */
.blur-light {
  filter: blur(1px);
  /* 几乎看不出模糊，但有一点朦胧感 */
}

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

/* 重度模糊：10px */
.blur-heavy {
  filter: blur(10px);
  /* 像雾一样模糊 */
}

1
2
3
4
5

<!-- 对比展示 -->
<img src="photo.jpg" alt="原图">
<img class="blur-light" src="photo.jpg" alt="轻微模糊">
<img class="blur-medium" src="photo.jpg" alt="中度模糊">
<img class="blur-heavy" src="photo.jpg" alt="重度模糊">

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

/* 1. 背景模糊，内容清晰 */
.blur-bg {
  position: relative;
  isolation: isolate;   /* 让子级的 z-index 在内部比较，-1 不会跑到更外层背景后面 */
  overflow: hidden;     /* 配合下面的放大，裁掉模糊后溢出的边缘 */
}

.blur-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("bg.jpg") center/cover;
  filter: blur(10px);  /* 背景模糊 */
  transform: scale(1.1);  /* 放大一点，避免模糊后四周出现"透明发虚"的亮边 */
  z-index: -1;
}

.blur-bg-content {
  position: relative;
  z-index: 1;
  /* 内容清晰 */
}

/* 2. 加载中的占位图 */
.loading-placeholder {
  filter: blur(5px);
  /* 让加载占位图有一种"正在加载"的朦胧感 */
}

/* 3. hover 时取消模糊 */
.blur-on-hover {
  filter: blur(5px);
  transition: filter 0.3s;
}

.blur-on-hover:hover {
  filter: blur(0);  /* hover 时变清晰 */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

/* brightness() 滤镜的基本用法 */

/* 变亮 */
.brightness-150 {
  filter: brightness(1.5);   /* 数字写法：150% 亮度，两种写法等价 */
}

.brightness-200 {
  filter: brightness(200%);  /* 百分比写法：翻倍 */
}

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

.brightness-0 {
  filter: brightness(0);     /* 0% 亮度，完全变黑 */
}

/* 恢复正常 */
.brightness-normal {
  filter: brightness(1);     /* 100% 亮度，等于初始值 */
}

1
2
3
4
5

/* 错误示范：只有最后一句生效，等于 filter: brightness(2) */
.wrong {
  filter: brightness(1.5);
  filter: brightness(2);
}

1
2
3
4

<!-- 亮度调整效果 -->
<img src="photo.jpg" alt="正常亮度">
<img class="brightness-high" src="photo.jpg" alt="提亮">
<img class="brightness-low" src="photo.jpg" alt="调暗">

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

/* 1. 图片 hover 变亮效果 */
.brighten-on-hover {
  transition: filter 0.3s;
}

.brighten-on-hover:hover {
  filter: brightness(1.1);  /* 稍微提亮 */
}

/* 2. 禁用状态的暗淡效果 */
.disabled-state {
  filter: brightness(0.7);  /* 暗淡显示禁用状态 */
}

/* 3. 深色模式的亮度补偿 */
@media (prefers-color-scheme: dark) {
  img:not([src*=".svg"]) {
    filter: brightness(1.1);  /* 暗色模式下图片稍微提亮 */
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

/* contrast() 滤镜的基本用法 */

/* 提高对比度 */
.contrast-150 {
  filter: contrast(150%);   /* 百分比写法 */
}

.contrast-2 {
  filter: contrast(2);      /* 数字写法，与 200% 等价 */
}

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

.contrast-05 {
  filter: contrast(0.5);    /* 与 50% 等价 */
}

/* 完全无对比度（所有颜色变成同一种中间灰）*/
.contrast-zero {
  filter: contrast(0);  /* 注意：不是灰度，而是所有颜色都被压成同一级灰 */
}

1
2
3
4
5
6

@media (prefers-color-scheme: dark) {
  .img-soften {
    /* 左到右依次作用：先压亮度，再压对比度 */
    filter: brightness(0.85) contrast(0.9);
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

/* grayscale() 滤镜的基本用法 */

/* 完全灰度 */
.gray-full {
  filter: grayscale(100%);  /* 完全变成黑白 */
}

/* 与上面完全等价：数字 1 就是百分比 100% */
.gray-full-alt {
  filter: grayscale(1);
}

/* 部分灰度 */
.gray-partial {
  filter: grayscale(50%);  /* 半灰度，半彩色 */
}

/* 恢复正常 */
.gray-normal {
  filter: grayscale(0);  /* 恢复彩色 */
}

1
2
3

<!-- 灰度效果对比 -->
<img src="colorful-photo.jpg" alt="彩色原图">
<img class="gray-full" src="colorful-photo.jpg" alt="黑白效果">

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

/* 1. 灰度 hover 变彩色效果 */
.gray-to-color {
  filter: grayscale(100%);
  transition: filter 0.5s;
}

.gray-to-color:hover {
  filter: grayscale(0);  /* hover 时变彩色 */
}

/* 2. 黑白海报效果 */
.poster-art {
  filter: grayscale(100%) contrast(1.2);
  /* 灰度 + 稍高对比度 = 艺术海报效果 */
}

/* 3. 禁用状态的灰度处理 */
.disabled-state-gray {
  filter: grayscale(100%);
  opacity: 0.5;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

/* sepia() 滤镜的基本用法 */

/* 完全棕褐色 */
.sepia-full {
  filter: sepia(100%);  /* 完全复古棕褐 */
}

/* 与上面完全等价（数字 1 = 百分比 100%） */
.sepia-full-alt {
  filter: sepia(1);
}

/* 部分棕褐 */
.sepia-partial {
  filter: sepia(50%);  /* 半复古半彩色 */
}

/* 恢复正常 */
.sepia-normal {
  filter: sepia(0);  /* 恢复原色 */
}

1
2
3

<!-- 棕褐色效果 -->
<img src="photo.jpg" alt="原图">
<img class="sepia-full" src="photo.jpg" alt="复古棕褐">

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

/* 1. hover 时从灰度变棕褐 */
.aging-effect {
  filter: grayscale(100%);
  transition: filter 0.5s;
}

.aging-effect:hover {
  filter: sepia(100%);
}

/* 2. 暖色调效果 */
.warm-tone {
  filter: sepia(30%);  /* 30% 棕褐，保留彩色感但有暖调 */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

/* hue-rotate() 滤镜的基本用法 */

/* 旋转90度 */
.rotate-90 {
  filter: hue-rotate(90deg);  /* 整体色相偏移，别指望某个颜色刚好变成指定色 */
}

/* 旋转180度 */
.rotate-180 {
  filter: hue-rotate(180deg);  /* 最常用的"整体反差"角度 */
}

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

/* 旋转360度（回到原色）*/
.rotate-360 {
  filter: hue-rotate(360deg);  /* 矩阵绕回原点，视觉上等于原色 */
}

/* 其他角度单位：0.5 圈 = 180 度，200grad = 180 度，π rad ≈ 180 度 */
.rotate-half-turn {
  filter: hue-rotate(0.5turn);
}

1
2
3
4

<!-- 色相旋转效果 -->
<img src="colorful.jpg" alt="原图">
<img class="rotate-90" src="colorful.jpg" alt="旋转90度">
<img class="rotate-180" src="colorful.jpg" alt="旋转180度">

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

/* 1. 同一套图标资源换主题色系（近似效果，不是精确匹配） */
.icon-theme-a {
  filter: hue-rotate(0deg);    /* 原始色系 */
}

.icon-theme-b {
  filter: hue-rotate(120deg);  /* 整体偏到另一个色系 */
}

.icon-theme-c {
  filter: hue-rotate(240deg);
}

/* 2. 彩虹循环动画 */
@keyframes rainbow {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

.rainbow {
  animation: rainbow 5s linear infinite;
}

/* 3. 尊重"减少动态效果"偏好——无障碍上很重要 */
@media (prefers-reduced-motion: reduce) {
  .rainbow {
    animation: none;
  }
}

1
2
3
4
5
6
7
8
9

/* box-shadow：沿元素的边框盒画阴影，边框盒内透明的像素照样被当成"实心" */
.box-shadow {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

/* drop-shadow：沿元素的实际可见形状（alpha 通道）画阴影 */
.drop-shadow {
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3));
}

1
2
3
4
5
6
7
8

<!-- box-shadow vs drop-shadow 对比 -->

<!-- 一个有透明PNG的情况 -->
<img class="box-shadow" src="icon-with-transparent-bg.png" alt="用 box-shadow 的透明背景图标">
<img class="drop-shadow" src="icon-with-transparent-bg.png" alt="用 drop-shadow 的透明背景图标">

<div class="box-shadow">box-shadow 会得到一个矩形影子</div>
<div class="drop-shadow">drop-shadow 会贴合图标轮廓</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

/* 1. PNG图标阴影 */
.icon-with-shadow {
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.2));
}

/* 2. 文字外发光（滤镜作用在整棵子树上，适合单行小标题，不适合大段文字） */
.text-glow {
  filter: drop-shadow(0 0 10px rgba(52, 152, 219, 0.5));
}

/* 3. 多层阴影：多个 drop-shadow() 用空格分隔，注意是同一条 filter 声明 */
.multi-shadow {
  filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.2)) drop-shadow(0 0 20px rgba(52, 152, 219, 0.5));
}

/* 4. 让黑色 SVG 图标变成白色并带阴影（图标"反色 + 发光"的常见写法） */
.icon-invert {
  filter: invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

/* invert()：反色（"照片底片"效果）——深色模式下最实用的一招 */
.icon-invert-dark {
  /* 原本是黑色描边的图标，在深色背景里反成白色 */
  filter: invert(1);
}

.img-invert-partial {
  filter: invert(70%);   /* 只反色 70%，得到偏灰的"负片"感 */
}

/* saturate()：饱和度 */
.saturate-0 {
  filter: saturate(0);      /* 完全去饱和 = 等价于 grayscale(100%) */
}

.saturate-3 {
  filter: saturate(3);      /* 300% 高饱和，适合做强调/故障风 */
}

/* opacity()：只是"滤镜版透明度"，和 opacity 属性有重要区别 */
.filter-opacity {
  filter: opacity(50%);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

/* 顺序不同，结果不同 */
.order-a {
  /* 先模糊，再提高对比度（模糊出来的灰过渡被拉开，看起来更"硬"） */
  filter: blur(4px) contrast(2);
}

.order-b {
  /* 先提高对比度，再模糊（细节先被压掉，再糊） */
  filter: contrast(2) blur(4px);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

/* backdrop-filter: blur() 的基本用法 */

/* 毛玻璃效果 */
.glass-effect {
  backdrop-filter: blur(10px);
  /* 背后内容模糊 10px */
  background: rgba(255, 255, 255, 0.3);  /* 关键是"半透明"，不然看不到滤镜效果 */
  border: 1px solid rgba(255, 255, 255, 0.4);  /* 加一层高光描边更像玻璃 */
}

/* 更强的模糊 */
.glass-heavy {
  backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.25);
}

/* 轻微模糊 */
.glass-light {
  backdrop-filter: blur(5px);
  background: rgba(255, 255, 255, 0.35);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<!-- 毛玻璃效果示例 -->
<div class="glass-effect" style="position: relative; min-height: 200px;">
  <div style="position: absolute; inset: 0; background: url('bg.jpg'); background-size: cover;">
    <!-- 背景图片 -->
  </div>
  <div style="position: relative; z-index: 1; padding: 20px;">
    <h2>毛玻璃效果</h2>
    <p>我是毛玻璃上的文字，背景是模糊的图片</p>
  </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

/* 反面教材：父级 opacity 小于 1，成了 backdrop root，模糊范围被截断 */
.parent-with-opacity {
  opacity: 0.95;              /* ← 罪魁祸首：这一句让子元素的模糊"失效" */
  background: url("bg.jpg");
}

.child-glass {
  backdrop-filter: blur(12px);   /* 只能模糊 parent 内部、child 之下的内容 */
  background: rgba(255, 255, 255, 0.3);
}

/* 想要"模糊整个页面背景"，就不要在祖先上加这些属性，
   或者把毛玻璃层放到这些祖先之外（比如直接作为 body 的子元素并用 position: fixed） */

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

/* 1. iOS风格的毛玻璃导航栏 */
.glass-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  -webkit-backdrop-filter: blur(20px);   /* Safari 9~17 需要带前缀 */
  backdrop-filter: blur(20px);           /* 标准写法，放后面 */
  background: rgba(255, 255, 255, 0.55); /* 不要太实，否则模糊看不出来 */
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  z-index: 1000;
}

/* 2. 模态框背景模糊 */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
}

/* 3. 浮层卡片效果 */
.floating-card {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/* 用 @supports 做渐进增强的写法 */
.glass-safe {
  background: rgba(255, 255, 255, 0.92);  /* 默认：足够不透明的兜底背景 */
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass-safe {
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    background: rgba(255, 255, 255, 0.35);  /* 支持时才换成半透明 */
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

/* mix-blend-mode 的基本用法 */

/* normal：正常显示（默认）*/
.blend-normal {
  mix-blend-mode: normal;
}

/* multiply：正片叠底 */
.blend-multiply {
  mix-blend-mode: multiply;
  /* 乘算：结果永远不会比两层都亮。白 = 不改变，黑 = 全黑 */
}

/* screen：滤色 */
.blend-screen {
  mix-blend-mode: screen;
  /* 反相的乘算：结果永远不会比两层都暗。黑 = 不改变，白 = 全白 */
}

/* overlay：叠加 */
.blend-overlay {
  mix-blend-mode: overlay;
}

/* darken：变暗 */
.blend-darken {
  mix-blend-mode: darken;
}

/* lighten：变亮 */
.blend-lighten {
  mix-blend-mode: lighten;
}

/* color-dodge：颜色减淡 */
.blend-color-dodge {
  mix-blend-mode: color-dodge;
}

/* color-burn：颜色加深 */
.blend-color-burn {
  mix-blend-mode: color-burn;
}

/* difference：差值 */
.blend-difference {
  mix-blend-mode: difference;
}

/* exclusion：排除 */
.blend-exclusion {
  mix-blend-mode: exclusion;
}

/* hue：色相 */
.blend-hue {
  mix-blend-mode: hue;
}

/* saturation：饱和度 */
.blend-saturation {
  mix-blend-mode: saturation;
}

/* color：颜色 */
.blend-color {
  mix-blend-mode: color;
}

/* luminosity：亮度 */
.blend-luminosity {
  mix-blend-mode: luminosity;
}

/* plus-lighter：相加，做光晕/交叉淡化（Safari 也支持，较新） */
.blend-plus-lighter {
  mix-blend-mode: plus-lighter;
}

1
2
3
4
5
6

<!-- 混合模式示例 -->
<div style="background: url('bg.jpg') center/cover; position: relative; isolation: isolate;">
  <div class="blend-multiply" style="background: #3498db; padding: 20px; color: white;">
    正片叠底效果：蓝色叠在图片上，图片的明暗会透出来
  </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

/* 典型需求：卡片里的图片和卡片背景混合，但不希望混到页面背景上 */
.card {
  isolation: isolate;   /* 创建一个隔离的混合舞台 */
  background: #fff;
  overflow: hidden;
}

.card .photo {
  mix-blend-mode: multiply;  /* 只会和 .card 的背景混合 */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

/* 套路 1：给灰度/单色 logo 上色——灰度层提供亮度，纯色层提供色相 */
.logo-tinted {
  background-color: #e63946;
  background-image: url("logo.png");   /* logo 是有透明通道的灰度图 */
  background-blend-mode: multiply;     /* 只用同一个元素的两个背景层混合，不需要 isolation */
}

/* 套路 2：让白色背景的图片"融进"背景（白底消失） */
.white-bg-removed {
  mix-blend-mode: multiply;   /* 白底乘任何颜色都等于那个颜色，于是白底"看不见了" */
}

/* 套路 3：让黑底素材自然叠加 */
.black-bg-removed {
  mix-blend-mode: screen;     /* 黑底加任何颜色都等于那个颜色 */
}

/* 套路 4：图片上的艺术标题——文字与图片互相影响，适合做视觉冲击，
   不适合需要稳定可读性的正文（同一行文字在图片的明暗区会呈现不同深浅） */
.hero-title {
  mix-blend-mode: overlay;
  color: #fff;
  font-weight: 900;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

/* background-blend-mode 的用法 */

.multi-bg {
  /* 注意背景层的顺序：靠前的是"上面"那一层 */
  background-image: url("pattern.png"), url("gradient.jpg");
  background-color: #3498db;      /* 颜色永远是最底层 */
  background-blend-mode: multiply, screen;
  /* 第一个值对应第一层（pattern.png），从它开始向下混合；
     第二个值对应第二层（gradient.jpg），再与背景色混合 */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

/* 常见组合：图案纹理 + 品牌色，用 multiply 让纹理"浸"进颜色里 */
.textured-brand {
  background-image: url("noise.png");
  background-color: #0f766e;
  background-blend-mode: multiply;
}

/* 常见组合：渐变叠加在照片上做"调色" */
.photo-tinted {
  background-image: url("photo.jpg"), linear-gradient(120deg, #6d28d9, #db2777);
  background-size: cover;
  background-blend-mode: soft-light;   /* 只写一个值，两层都用它 */
}