具有透明度的CSS3渐变无法在Safari中正确显示 [英] CSS3 Gradient with transparency not displaying correctly in Safari

问题描述

这是一个难题.以下渐变不能在Safari中正确显示(在Firefox和Chrome中可以使用):

This is a puzzle. The following gradient doesn't display correctly in Safari (works in Firefox and Chrome):

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

我也尝试过:

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

在Safari上对其进行测试，您会看到以下问题: jsFiddle .

Test it on Safari and you will see the issue: jsFiddle.

我该如何解决?

推荐答案

尝试:背景:linear-gradient(rgba(255,255,255,0)124px，#de6230);

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

对不起，OP，尽管它是正确的颜色，但看起来仍然与您的渐变色不同，灰色中间只是变成了白色中间.我找到的解决方案是:

sorry OP, that still doesn't look the same as your gradient although it is the correct colors, the gray middle just turned to a white middle. The solution I found was:

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

222,98,48是#de6230的rgb值，因此这应该可以工作.它从0％alpha的颜色过渡到100％alpha的颜色.

222,98,48 is the rgb value of #de6230 so this should work. It's transitioning from your color at 0% alpha to your color at 100% alpha.

这篇关于具有透明度的CSS3渐变无法在Safari中正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！