私はこの問題についていくつか読んできましたが、私は 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));
}
ここでは、最初に良い結果、次に悪い結果を確認できます。
誰かがこれについて何ができるかを私に提案できますか? または、リングなしでこの効果を再現する別の方法がある場合は? どうもありがとうございました、
ラジコン