### [CSS3中的filter属性可以不用Photoshop也能做出很棒的图片效果](https://www.huociguo.com/article/2073)

**Published:** 2026-11-10T09:02:19

**Author:** 米了

**Excerpt:** 图片后期处理不需要使用专业的图像处理软件了，在浏览器中用 属性就可以实现模糊、调色、褪色和阴影等效果，这些都是…

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

![](https://api.huociguo.com/wp-content/uploads/2026/11/20261110170025338-10091a77f4-1.webp "20261110170025338-10091a77f4-1")

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

## 核心滤镜函数

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

```css
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()`放到最后面：

```css
/* 阴影保持红色 */
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));
```

## 可以重复使用的视觉配方

```css
/* 胶片复古 */
.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);
}
```

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

```css
.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`属性，这样会导致整个文本都变得模糊不清了。应该使用一个伪元素来放置背景图片：

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

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

```css
.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过滤器，这样空间就大了很多
    

## 总结

用一行CSS代码来代替专业的调色软件：一个函数进行基本的颜色调整，多个函数串联起来形成风格化的效果，再加上`transition`和`backdrop-filter`来实现界面级别的视觉提升。了解了它们的顺序、组合以及性能限制之后，网页上的图片就可以摆脱掉传统的预处理过程，在浏览器中实时生成。

**Categories:** CSS3

---