Safari 中带有环或条带的 CSS 渐变答案

【问题标题】：CSS gradient with rings or banding in SafariSafari 中带有环或条带的 CSS 渐变
【发布时间】：2012-08-21 03:55:44
【问题描述】：

我一直在阅读有关此问题的一些信息，但我不是 CSS 专家，所以我想问一下。我在带有噪音的深色背景图像上使用此代码，它在 Firefox 中看起来很棒，但在 Safari 中它有环：

#welcome {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    background-image: -webkit-radial-gradient(circle, rgba(100,100,100,0.2), rgba(0,0,0,0.9));
    background-image: -moz-radial-gradient(circle, rgba(100,100,100,0.2), rgba(0,0,0,0.9));
    background-image: -linear-radial-gradient(circle, rgba(100,100,100,0.2), rgba(0,0,0,0.9));
    background-image: -ms-radial-gradient(circle, rgba(100,100,100,0.2), rgba(0,0,0,0.9));
    background-image: -o-radial-gradient(circle, rgba(100,100,100,0.2), rgba(0,0,0,0.9));
}
#welcome::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
    background-image: -webkit-radial-gradient(circle, rgba(255,255,255,0.1), rgba(255,255,255,0));
    background-image: -moz-radial-gradient(circle, rgba(255,255,255,0.1), rgba(255,255,255,0));
    background-image: -linear-radial-gradient(circle, rgba(255,255,255,0.1), rgba(255,255,255,0));
    background-image: -o-radial-gradient(circle, rgba(255,255,255,0.1), rgba(255,255,255,0));
    background-image: -ms-radial-gradient(circle, rgba(255,255,255,0.1), rgba(255,255,255,0));
}

在这里你可以看到结果，第一是好，第二是坏：

http://cl.ly/1k1K2M1x3Y0G

http://cl.ly/3P1L0c1B3Z1t

有人可以向我建议对此可以做些什么吗？或者是否有另一种方法可以在没有戒指的情况下重现这种效果？非常感谢，

【问题讨论】：

+1 展示你的尝试！
只是一个疯狂的猜测，这可能是一个颜色管理问题。
与您的问题无关，但-linear-radial-gradient 是什么？
你真的应该在你的 SO 帖子中嵌入网络友好的图像......

标签： html css safari gradient radial

【解决方案1】：

我不完全确定您的 CSS 有什么问题，但我建议您使用此资源来生成 CSS 渐变。它也能够创建径向渐变，并且似乎不会在 Safari 中生成环（至少在预览版中不会）。

http://www.colorzilla.com/gradient-editor/

【讨论】：

感谢您的回复。我已经尝试过这个网站，它非常好。但我仍然有同样的问题。似乎取决于选择的颜色等。不幸的是，我想现在我不得不转向另一个想法......