用 CSS 实现抖动效果教程：纯前端做出复古像素风图片风格

想给网站图片加上复古像素风的抖动效果（dithering）？现在只需纯 CSS 和 SVG 滤镜就能实现，不需要后端图片处理。

什么是抖动效果？

抖动（dithering）是一种用有限颜色模拟更多色调的技术，在早期计算机和游戏机中被广泛使用。经典的抖动算法通过有策略地排列不同颜色的像素点，让人眼看到一种”混色”效果。这种效果现在常被用于复古风格设计、低保真艺术和减小文件体积。

实现原理

ikesau 在其博客中分享了一种使用 SVG <feTurbulence> 和 <feComposite> 滤镜的纯 CSS 方案。核心思路是：

1. 用 SVG 的 <feTurbulence> 生成噪声纹理
2. 用 <feComposite> 将噪声与原图混合
3. 用 CSS 的 filter 属性应用到图片上

具体实现步骤

第一步：创建 SVG 滤镜

在 HTML 中添加一个隐藏的 SVG 滤镜定义：

<svg style="display:none">
  <defs>
    <filter id="dither">
      <feTurbulence
        type="fractalNoise"
        baseFrequency="0.90"
        numOctaves="1"
        seed="2"
        result="noise" />
      <feComposite
        in="SourceGraphic"
        in2="noise"
        operator="arithmetic"
        k1="0" k2="0.75" k3="0.35" k4="-0.05"
        result="composite" />
    </filter>
  </defs>
</svg>

第二步：应用到图片

.dithered {
  filter: url(#dither);
}

第三步：可选的双色调模式

如果想要更极致的复古感，可以叠加 CSS 的 contrast 和 grayscale：

.dithered-duotone {
  filter: url(#dither) contrast(1.5) grayscale(1);
}

参数调整说明

• baseFrequency：控制噪声密度，值越大噪点越密（推荐 0.6-1.0）
• numOctaves：噪声层次，值越高细节越多（通常用 1 就够）
• seed：噪声种子，改变它会得到不同的噪点图案
• k1-k4：feComposite arithmetic 的混合参数，控制噪声对原图的影响程度

实际效果

这种抖动效果特别适合：

• 想要统一网站图片风格的场景
• 复古像素风、低保真设计风格
• 照片转黑白/双色调时增加纹理感
• 想让普通截图融入手绘风格页面

一个很酷的特点是：原始图片仍然完整加载在页面上，滤镜效果是纯视觉的。这意味着用户可以通过修改主题或切换开关来动态改变效果，甚至可以关闭它查看原图。

注意事项

• 这个方案主要用于美学效果，不会减少实际加载的图片体积
• SVG 滤镜在部分浏览器上可能有性能影响，大量图片时需注意
• 噪点可能影响小图的可读性，建议对大图/背景图使用
• 移动端 Safari 对 SVG 滤镜的支持可能有差异，建议多测试

来源：ikesau – dithering with css、在线 Dithering 工具