如何防止 CSS 渐变色带？

Posted 2023-02-16

【中文标题】如何防止 CSS 渐变色带？

【英文标题】：How can I prevent CSS gradient banding?

【发布时间】：2012-07-24 20:50:22

【问题描述】：

我开始使用 CSS 渐变，而不是实际的图像，原因有两个：首先，CSS 渐变的加载速度肯定比图像快，其次，它们不应该像许多光栅图形那样显示条纹。我最近开始在各种屏幕上测试我的网站，在较大的屏幕（24 英寸以上）上，构成我网站背景的 CSS 线性渐变显示了非常明显的条纹。作为临时修复，我用一个小的、重复的、透明的PNG 噪声图像覆盖了渐变，这有点帮助。有没有其他方法可以解决此条带问题？

【问题讨论】：

1) 这取决于浏览器的渲染。 2) 这取决于您的显示器。

我决定使用基于@Michael Giovanni Pumo 回答的解决方案：在 Photoshop 中制作 1 像素高的渐变，使用模糊、颗粒和其他抖动方法去除条纹，然后重复 - x.

提示：无论您最终使用什么技术，请确保您了解臭名昭著的 ios 渲染“怪癖”，即淡入透明实际上总是淡入透明黑色。 betterprogramming.pub/… 这个长期存在的问题确实会使渐变看起来很糟糕，如果您必须针对 iOS 用户，任何不考虑这一点的纠正条带的巧妙修复都是浪费时间

【参考方案1】：

我知道你不会喜欢这样的声音，但目前唯一真正在这种情况下获得一致的跨浏览器美感的方法是使用重复图像。

如果是简单的线性渐变，那么你只需要1px宽，和渐变一样高，然后把页面的背景色作为渐变的最终颜色，这样就可以流畅的运行了。这将保持文件大小很小。

如果您想减少图像中的渐变带，请使用 PNG（不是透明度），因为我发现这些比 JPG 更适合此目的。

在 Adob​​e Fireworks 中，我会将其导出为 PNG-24。

祝你好运。

http://codepen.io/anon/pen/JdEjWm

#gradient 
  position: absolute;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(black), to(white));
  background: -webkit-linear-gradient(top, black, white);
  background: -moz-linear-gradient(top, black, white);
  background: -ms-linear-gradient(top, black, white);
  background: -o-linear-gradient(top, black, white);
  background: linear-gradient(top, black, white);

【参考方案2】：

您可以通过将渐变从第一种颜色变为透明，并在下方使用background-color 表示第二种颜色，从而产生稍好的效果。我还建议使用background-size 来处理横跨屏幕的大渐变，这样渐变实际上不会填满整个屏幕。

【讨论】：

我可以确认在背景颜色上叠加渐变实际上效果更好。还可以尝试交换背景色和渐变色，因为其中一个选项似乎总是看起来更好（webkit/blink）

我从没想过重叠 2 个渐变，每边都有透明的一面。我一定会在需要的时候记住它！

不，这种方法实际上使条带明显变差。

【参考方案3】：

我制作了一个“scatter.png”来放置我的渐变。像这样：

打开 gimp 100x100 图片 添加 Alpha 通道 过滤器 -> 噪音 -> Hurl... 接受默认值 将不透明度设置为 5%

保存然后添加到渐变中。

background: url('/img/scatter.png'), linear-gradient(50deg,#d00 0,#300 100%);

这是一种微妙的效果。

【参考方案4】：

对于纯 CSS 答案，您可以使用模糊过滤器为 css 渐变添加模糊并减轻条带。这可能意味着对层次结构进行一些重建以不模糊内容，并且您需要隐藏溢出以获得清晰的边缘。在条带问题可能特别严重的动画背景上效果非常好。

.blur
  overflow:hidden;
  filter: blur(8px);

【讨论】：

尝试了模糊技术。表现极差。一两个模糊层确实提高了质量，但性能成本极高。 10 个 100px 模糊的图层需要我的eeepc 几分钟才能显示出来。

【参考方案5】：

我知道这个问题早就解决了，但是对于其他遇到条纹并正在寻找解决方案的人来说，对我来说一个非常简单的解决方法就是简化我在渐变中包含的颜色。例如：

这种渐变会产生条带：

background-image: linear-gradient(-155deg, #202020 0%, #1D1D1D 20%,
#1A1A1A 40%, #171717 60%, #141414 80%, #101010 100%);

这个渐变没有，而且看起来很相似：

background-image: linear-gradient(-155deg, #202020 0%, #101010 100%);

【参考方案6】：

我知道这有点晚了，但我发现了一个有效的技巧。对于在颜色交汇点处具有粗糙边缘的任何人。这将其删除。

.gradient 
  background: linear-gradient(
    173deg,
    rgba(0, 132, 255, 1) 50%,
    rgba(255, 255, 255, 1) 50.5%
  );

【参考方案7】：

实际上没有任何方法可以去除条带。 CSS 渐变受浏览器各种渲染引擎的支配。有些浏览器只是比其他浏览器渲染得更好。您可以做的最好的事情是覆盖较短的区域和较大的颜色范围以增加渐变步骤......然后等待浏览器渲染改善。

【参考方案8】：

添加最小高度。

#gradient 
  min-height: 100vh;
  background: linear-gradient(black, white);

您也可以将 background-repeat 设置为 no-repeat，但这不是必需的。

#gradient 
  min-height: 100vh;
  background: linear-gradient(black, white);
  background-repeat: no-repeat;