3

私はこの問題についていくつか読んできましたが、私は 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

誰かがこれについて何ができるかを私に提案できますか? または、リングなしでこの効果を再現する別の方法がある場合は? どうもありがとうございました、

ラジコン

4

1 に答える 1

-2

CSS の何が問題なのかは完全にはわかりませんが、このリソースを使用して CSS グラデーションを生成することをお勧めします。放射状のグラデーションを作成する機能もあり、Safari ではリングを生成しないようです (少なくともプレビューでは)。

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

于 2012-08-21T07:48:29.367 に答える