我开始使用 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, black, white);
background: -ms-linear-gradient(top, black, white);
background: -o-linear-gradient(top, black, white);
background: linear-gradient(top, black, white);
}
background-color
来表示第二种颜色,从而获得稍微更好的结果。我还建议使用
background-size
来实现跨越屏幕的大渐变,这样渐变实际上不会填充整个屏幕。打开gimp
background: url('/img/scatter.png'), linear-gradient(50deg,#d00 0,#300 100%);
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%);
.blur{
overflow:hidden;
filter: blur(8px);
}
.gradient {
background: linear-gradient(
173deg,
rgba(0, 132, 255, 1) 50%,
rgba(255, 255, 255, 1) 50.5%
);
}
#gradient {
min-height: 100vh;
background: linear-gradient(black, white);
}
您还可以将背景重复设置为不重复,但这不是必需的。
#gradient {
min-height: 100vh;
background: linear-gradient(black, white);
background-repeat: no-repeat;
}