#优质博文 #前端 #css #svg
太牛了，Ana Tudor 的文章每次看都觉得 CSS SVG 大师。

Grainy Gradients

AI 摘要：本文详细探讨了如何通过 CSS 和 SVG 技术解决渐变背景中常见的 banding（色带）问题。作者回顾了过去复杂的解决方案，并提出了一种更优的方法，即使用 SVG 滤镜和位移映射（displacement map）技术来创建颗粒状渐变效果，同时避免改变原始渐变的颜色属性。文章还讨论了当前方法的局限性以及未来改进的可能性，例如使用 filter() 函数直接对渐变背景应用滤镜，并通过多个示例展示了颗粒效果在不同场景中的应用。

1. 引言与问题背景：文章首先介绍了渐变背景或渐变蒙版中常见的 banding 效应，通过示例图片直观展示了这一问题，强调了解决此问题的必要性。
以往解决方案的不足：
• 增加渐变停止点（Easing）：通过添加更多颜色停止点来缓解 banding，但作者认为此方法不够理想。
• 叠加噪声层：早期方法通过伪元素叠加渐变层和噪声层并混合，但这种方法复杂且效果不佳。
• 改进后的叠加方式：后续尝试通过透明渐变末端显示噪声层，但仍存在复杂性和颜色失真的问题。
• SVG 滤镜初步尝试：作者在第二段视频中提出使用 SVG 滤镜生成噪声并叠加到渐变上，但仍不满意此方案。
• 叠加噪声与渐变的核心问题：所有叠加方法都会改变原始渐变的亮度、饱和度等属性，降低噪声透明度则会减少颗粒效果，影响解决 banding 的效率。

2. 更优解决方案：位移映射
• 原理说明：使用噪声层作为位移映射，通过 RGBA 通道值决定渐变像素在 x 和 y 轴上的偏移，避免直接叠加噪声改变颜色。
• 代码实现：通过 SVG 滤镜（feTurbulence 和 feDisplacementMap）生成噪声并应用位移效果，详细解释了滤镜参数和 CSS 布局处理。
• 问题修复：解决滤镜应用后边界内透明像素和边界外不透明像素的问题，使用 feBlend 和滤镜区域限制（或 clip-path）来优化结果。

3. 当前方案的问题与临时解决方案：
• 滤镜影响整个元素：滤镜会影响元素的所有内容（如文本、阴影），导致不希望看到的效果。
• 解决方法：通过伪元素分离渐变背景并应用滤镜，避免影响其他内容，提供了具体的 CSS 代码实现。

4. 未来改进方向：
• 使用 filter() 函数：提出直接对背景渐变应用滤镜的理想方法，简化代码，但目前仅 Safari 支持，呼吁其他浏览器实现此功能。
• 应用场景扩展：特别提到在蒙版渐变（如径向渐变蒙版）中应用颗粒滤镜的潜力，并讨论了跨浏览器兼容性问题和临时替代方案。

5. 更多示例：
• 颗粒状图像阴影：展示如何通过复杂滤镜创建颗粒状阴影效果，解决阴影边缘的 banding 问题。
• 颗粒状图像渐变淡出：通过位移半透明边缘像素实现颗粒状淡出效果。
• 噪声渐变圆盘：利用 SVG 径向渐变和滤镜创建独特的颗粒效果。
• 动画渐变发光边框：在流行的渐变发光边框中应用颗粒效果，提升视觉效果。
• 颗粒状 CSS 背景：通过多层线性渐变模拟网格渐变，并应用颗粒滤镜解决 banding。
• 颗粒状 SVG 背景：通过叠加不同形状和渐变填充的 SVG 元素，模糊并应用颗粒滤镜，创造抽象背景效果。

author Ana Tudor