线性梯度到最新野生动物园中的透明错误? [英] linear-gradient to transparent bug in latest safari?

问题描述

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

I'm applying a basic linear-gradient like this:

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

除了在野生动物园中将透明呈现为黑色/灰色的颜色外，这在所有地方都应按预期进行:

this behaves as it's supposed to everywhere except in safari where the transparent is rendered as a blackish/greyish color:

这是镶边(应该是这样):

here's chrome (how it is supposed to be):

这是野生动物园

我尝试用-webkit-作为前缀，将rgba更改为rgba(0,0,0,0.001)，但是它从未变为透明.这是一个错误吗?有办法解决这个问题吗?

I've tried prefixing it with -webkit-, changing the rgba to rgba(0,0,0,0.001) but it never goes to solid transparent. is this a bug? is there a way to fix this?

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

推荐答案

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

This has to do with the way browsers render transparent.

对于大多数浏览器，

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

但是Safari将其呈现为

But Safari renders it as

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

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

So if you have a gradient from transparent to white (or rgba(255,255,255,1)), for most browsers you're only changing the alpha from 0 to 1 along the gradient.

但是对于Safari而言，您将alpha值从0更改为1 ，的颜色从255更改为0，因此您获得了灰色的渐变.

But for Safari, you're changing the alpha from 0 to 1 and the color from 255 to 0, so you get a gradient of greys.

这使我发疯了一段时间.

This drove me crazy for a while.

这篇关于线性梯度到最新野生动物园中的透明错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！