如何防止 CSS 渐变色带？

Question

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

原文由 John Doe 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

在 Adobe 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);
}

原文由 Michael Giovanni Pumo 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这个属性似乎可以解决问题

background-attachment: fixed;

从 这个 线程得到

原文由 Harsh 发布，翻译遵循 CC BY-SA 4.0 许可协议