CSS3中的filter属性可以不用Photoshop也能做出很棒的图片效果

图片后期处理不需要使用专业的图像处理软件了，在浏览器中用filter属性就可以实现模糊、调色、褪色和阴影等效果，这些都是CSS可以做的，而且还可以做动画和交互。

20261110170025338-10091a77f4-1 — CSS3中的filter属性可以不用Photoshop也能做出很棒的图片效果

核心滤镜函数

filter 接受一个由空格分开的函数列表，按照从左到右的顺序执行这些函数：

img {
  filter: brightness(1.1) contrast(1.15) saturate(1.3);
}

常用函数与视觉表现：

blur(4px)：高斯模糊，适合景深、毛玻璃、加载占位
brightness(1.2)：亮度倍增，小于 1 压暗，0 全黑
contrast(1.4)：拉大明暗反差，增强质感
grayscale(100%)：去色，做复古或禁用态
sepia(80%)：暖棕色调，营造老照片氛围
：使颜色更加鲜艳
hue-rotate(90deg)：沿着颜色环移动色调，迅速改变颜色
invert(100%)：反相，底片效果，也常用于暗色模式图标翻转
opacity(0.8)：透明叠加
drop-shadow(0 8px 16px rgba(0,0,0,.25))：可以产生透明边缘的效果，比box-shadow更适合PNG和SVG

滤镜链中存在的顺序问题

顺序会影响最终的效果，在加上阴影之后再降低亮度，那么阴影也会失去颜色；彩色投影应该把drop-shadow()放到最后面：

/* 阴影保持红色 */
filter: drop-shadow(0 6px 8px rgb(200 0 0 /.6)) grayscale(1);

/* 阴影也被灰度化 */
filter: grayscale(1) drop-shadow(0 6px 8px rgb(200 0 0 /.6));

可以重复使用的视觉配方

/* 胶片复古 */
.vintage {
  filter: sepia(55%) contrast(1.1) brightness(.96) saturate(1.1);
}

/* 冷调通透 */
.cyber {
  filter: hue-rotate(160deg) saturate(1.3) contrast(1.12);
}

/* 暗黑情绪 */
.moody {
  filter: grayscale(.7) brightness(.72) contrast(1.28);
}

/* 柔光梦镜 */
.dreamy {
  filter: blur(1.5px) brightness(1.08) saturate(1.18);
}

与过渡相结合使静态图片具有了动态的生命力：

.card img {
  filter: grayscale(1) brightness(.9);
  transition: filter .35s ease;
}

.card:hover img,
.card:focus-within img {
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .card img { transition: none; }
}

背景层处理与 backdrop-filter

当要隐藏卡片后面的文字的时候，不要直接在容器上添加filter属性，这样会导致整个文本都变得模糊不清了。应该使用一个伪元素来放置背景图片：

.hero::before {
  content: "";
  position: absolute;
  inset: -20px;
  background: url("hero.jpg") center / cover;
  filter: blur(10px) brightness(.55);
}

或者使用 backdrop-filter 来对元素后面的部分进行处理，非常适合做导航栏、弹出窗口和毛玻璃效果等用途。

.panel {
  backdrop-filter: blur(12px) saturate(1.2);
  background: rgba(255,255,255,.08);
}

性能、界限

filter 会生成一个新的层叠上下文，在现代浏览器中采用GPU加速的方式进行处理，但是大面积的连续动画仍然需要用到will-change: filter来降低性能开销
原图没有受到任何损害，是是非破坏性的修改方式，在转换状态下不需要额外的图片
复杂的颗粒、噪声和局部的修复仍然属于Photoshop或者Canvas，而CSS则善于处理整体的色彩以及实时的互动
但是可以加上url(#svg-filter)来使用自己的SVG过滤器，这样空间就大了很多