Question

我正在应用这样的基本线性渐变：

background-image:  linear-gradient(to top, red, rgba(0,0,0,0));

除了在safari中透明呈现为黑色/灰色的颜色之外，

这应该是应有的所有地方：

这里是chrome（它应该如何）：

和这里的野生动物园

我尝试使用-webkit-作为前缀，将rgba更改为rgba(0,0,0,0.001)，但它永远不会变为透明。这是一个错误吗？有没有办法解决这个问题？

这是一个小提琴https://jsfiddle.net/2Lrp3sv1/2/

Answer 1

这与浏览器呈现transparent的方式有关。

对于大多数浏览器，

transparent === rgba(255,255,255,0)

但Safari将其呈现为

transparent === rgba(0,0,0,0)

因此，如果您有transparent到white（或rgba(255,255,255,1)）的渐变，对于大多数浏览器，您只是沿着渐变将alpha从0更改为1。

但对于Safari，您将alpha从0更改为1 并将颜色从255更改为0，因此您将获得渐变灰度。

这让我疯了一会儿。

Answer 2

没有浏览器将transparent呈现为rgba(255, 255, 255, 0)，这是完全错误的。根据{{3}}的定义，transparent始终为rgba(0,0,0,0)。但是，几年前，我们更改了颜色插值在渐变中的工作方式，并指定了CSS Color 3 specification，正是为了解决此问题并使transparent进行插值按预期工作。看起来其他浏览器已经实现了此更改，但Safari尚未实现。如果要使Safari的渐变看起来相同，则需要使用色标，该色标使用要插入/插入的颜色的透明版本（如果这些颜色不同，有时可能需要在相同位置使用两个色标），在这种情况下为linear-gradient(to top, red, rgba(255,0,0,0))。或者只是等待Safari赶上来！：）

Answer 3

我也在Safari中看到了这一点。对我而言，即使我使用的颜色都没有接近红色，它也会变成浅红色。

我使用＆＃39;透明＆＃39;解决了它。作为价值。一旦我停止使用rgba，它看起来就像预期的那样。

Answer 4

根据@AJFarkas的内容，只需将transparent替换为rgba(255, 255, 255, 0) ，它就可以在Safari上正常工作！

在我的情况下，这是一个从白色到透明再到白色的线性渐变：

background-image: linear-gradient(to right, #fff 10%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 75%, #fff 90%);

Answer 5

我遇到的情况是CMS会动态应用渐变中的颜色，因此这是Safari中针对此问题的Javascript修复程序，考虑了这一点。

假设您使用的是伪类来实现此目的，则可以使用js返回元素，创建新的样式标签并将其插入文档的开头。

<script>
    var col = document.querySelector('.my_div').style.color;
    var style = document.createElement('style');

    // Replace RGB with RGBA (we need the opacity)
    col = col.replace(/rgb/i, "rgba");
    col = col.replace(/\)/i,', 0)');

    //Create our new styles based on the returned colours
    style.innerHTML =
      '.my_div::before {' 
    + 'background-image: linear-gradient(to left, currentColor 0%, '
    + col 
    + ' 15%);'
    +'}';

    var ref = document.querySelector('script');
    // Insert our new styles before the first script tag
    ref.parentNode.insertBefore(style, ref);
</script>

Here's the source of this great trick

Answer 6

对于我的情况看起来像是从变化

background-image: linear-gradient(rgba(243, 243, 251, 1), transparent);

到：

background: linear-gradient(rgba(243, 243, 251, 1), rgba(255, 255, 255, 0));

在 safari 上完美运行。

在最新的野生动物园中线性渐变到透明的虫子？

6 个答案: