html - Safari 中带有圆环或 strip 的 CSS 渐变

Question

我一直在阅读有关这个​​问题的一些资料，但我不是 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

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

回复

Answer 1

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

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