Safariで直線勾配の暗い効果を避けるには？

Question

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: linear-gradient(top, blue, transparent); 
 
}

<div></div>

クローム62は、レンダリング：

サファリ11は、レンダリング：

どのようにSafariでこの減光効果を避けるためでしょうか？

Answer 1

透明をrgbaカラー値に設定してみてください。例：

background: linear-gradient(top, blue, rgba(0,0,255,0)); 

両方のRGB値が一致する必要があります。あなたが現在の構文に問題があるすべての

Answer 2

まず、Chromeで あなたは、それがbackground: linear-gradient(to bottom, blue, transparent);する必要がありますので、それは「無効なプロパティ」とみなされます他、方向の前に「に」を追加する必要が その後、使用クロスブラウザソリューション：

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    /* For browsers that do not support gradients */ 
 
    background: blue; 
 
    /* For Safari 5.1 to 6.0 */ 
 
    background: -webkit-linear-gradient(top, blue, transparent); 
 
    /* For Opera 11.1 to 12.0 */ 
 
    background: -o-linear-gradient(top, blue, transparent); 
 
    /* For Firefox 3.6 to 15 */ 
 
    background: -moz-linear-gradient(top, blue, transparent); 
 
    /* Standard syntax */ 
 
    background: linear-gradient(to bottom, blue, transparent); 
 
}

<div></div>

あなたはW3schoolsでグラデーションについての詳細を読むことができます。