如何防止 CSS 渐变带？

Question

我开始使用 CSS 渐变，而不是实际图像，有两个原因：首先，CSS 渐变加载速度肯定比图像更快，其次，它们不应该像许多光栅图形那样显示条带。我最近开始在各种屏幕上测试我的网站，在较大的屏幕（24 英寸以上）上，构成我网站背景的 CSS 线性渐变显示出非常明显的条带。作为临时修复，我用一个小的、重复的、透明的

PNG

噪声图像覆盖了渐变，这有点帮助。有没有其他方法可以解决这个条纹问题？

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

Answer 2

background-color

来表示第二种颜色，从而获得稍微更好的结果。我还建议使用

background-size

来实现跨越屏幕的大渐变，这样渐变实际上不会填充整个屏幕。

Answer 3

打开gimp

1. 100x100 图像
2. 添加 Alpha 通道
3. 过滤器 -> 噪音 -> 投掷...接受默认值
4. 将不透明度设置为 5%
保存然后添加到渐变。

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

这是微妙效果上的微妙效果。

Answer 4

此渐变会产生条带：

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%);

Answer 5

Answer 6

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

Answer 7

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

Answer 8

Answer 9

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

您还可以将背景重复设置为不重复，但这不是必需的。

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