我开始使用CSS渐变，而不是实际的图像，有两个原因：首先，CSS渐变绝对加载比图像更快，其次，他们不应该显示条带，像许多光栅图形。我最近开始在各种屏幕上测试我的网站，而在较大的屏幕(24英寸)上，构成我网站背景的CSS线性渐变显示非常明显的条带。作为一个临时解决方案，我用一个小的，重复的，透明的PNG图像叠加了渐变，这有助于一些噪点。有没有其他方法来解决这个绑定问题？
解决方法
我知道你不会喜欢这样的声音，但是在这种情况下，现在获得一致的跨浏览器美学的唯一真正的方法是使用重复的图像。
如果它是一个简单的线性渐变，那么您只需要将其设置为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,white);
background: -ms-linear-gradient(top,white);
background: -o-linear-gradient(top,white);
background: linear-gradient(top,white);
}
