如何防止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

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

1. 打开gimp
2. 100x100 图像
3. 添加 Alpha 通道
4. 过滤器 -> 噪音 -> 投掷...接受默认值
5. 将不透明度设置为 5%

6. 保存然后添加到渐变。

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

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