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);