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/

在Safari中使用环形或条带的CSS渐变

1 个答案: