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

我做了一个＆＃34; scatter.png＆＃34;用我的渐变。像这样：

打开gimp
100x100图片
添加Alpha频道
过滤器 - ＆gt;噪音 - ＆gt; Hurl ...接受默认值
将优先级设置为5％

保存，然后添加到渐变。

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

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

Answer 6

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

.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

添加最小高度。

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

如何防止CSS渐变条带？

8 个答案: