Safari中带有环形或带状的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

有人能给我提个建议吗？或者，如果有其他方法可以在没有戒指的情况下重现这种效果？非常感谢

rc

Answer 1

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

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