CSS3漸變透明度在Safari中無法正確顯示

Question

這是一個難題。下面的梯度並不在Safari中正確顯示（在Firefox和Chrome）：

background: linear-gradient(transparent 124px, #de6230); 

我也曾嘗試：

background: linear-gradient(rgba(255,0,0,0) 124px, #de6230); 

測試它的Safari瀏覽器，你會看到這個問題：jsFiddle。

我該如何解決這個問題？

Answer 1

Try： background：linear-gradient（rgba（255,255,255,0）124px，＃de6230）;

編輯：對不起，OP，雖然它是正確的顏色，但仍然看起來不像你的漸變，灰色中間只是變成了白色中間。我找到的解決方案是：

background: linear-gradient(rgba(222,98,48,0) 124px, #de6230); 

222,98,48是＃de6230的rgb值，所以這應該工作。它從0％alpha的顏色過渡到100％alpha的顏色。

Answer 2

嘗試：

background: -webkit-linear-gradient(rgba(255,0,0,0) 124px, #de6230); 
background: -moz-linear-gradient(rgba(255,0,0,0) 124px, #de6230); 
background: -o-linear-gradient(rgba(255,0,0,0) 124px, #de6230); 
background: linear-gradient(rgba(255,0,0,0) 124px, #de6230); 

或更換背景與背景圖像

background-image: -webkit-linear-gradient(rgba(255,0,0,0) 124px, #de6230); 
background-image: -moz-linear-gradient(rgba(255,0,0,0) 124px, #de6230); 
background-image: -o-linear-gradient(rgba(255,0,0,0) 124px, #de6230); 
background-image: linear-gradient(rgba(255,0,0,0) 124px, #de6230);