在最新的野生动物园中线性渐变到透明的虫子？
val*_*999 5 safari linear-gradients css3 rgba
我正在应用这样的基本线性渐变:
background-image: linear-gradient(to top, red, rgba(0,0,0,0));
除了在safari中,透明度呈现为黑色/灰色,因此它的行为与其他地方一样.
这是铬(它应该是怎样):
这是野生动物园
我试着用前缀它-webkit-,改变rgba到rgba(0,0,0,0.001),但它从来就没有到固体透明.这是一个错误吗？有没有办法来解决这个问题？
Lea*_*rou 30
没有浏览器呈现transparent为rgba(255, 255, 255, 0)，这是完全错误的。transparent总是rgba(0,0,0,0)，如CSS Color 3 规范中所定义。然而，几年前，我们改变了颜色插值在渐变中的工作方式，并指定它应该在预乘 RGBA 空间中发生，正是为了解决这个问题并使插值transparent按预期工作。看起来其他浏览器已经实施了此更改，但 Safari 还没有。如果您希望 Safari 的渐变看起来相同，则需要使用色标，这些色标利用您要插入到/从中插入的颜色的透明版本（如果这些颜色不同，有时可能需要在同一位置使用两个色标） ，在这种情况下linear-gradient(to top, red, rgba(255,0,0,0))。或者只是等待 Safari 赶上来！:)
- 也许“渲染”这个词用得不对。不管怎样，当你提到检查规范时，会有人检查这个答案，他们的眼睛会交叉。有没有一种技术含量较低且更容易理解的方式来表达这一点？我会赞成这一点。 (2认同)
AJF*_*kas 23
这与浏览器呈现的方式有关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,因此您将获得渐变灰度.
这让我疯了一会儿.
- 你不知道 这是苹果公司的一项创新。 (4认同)
- 这是不正确的，我希望人们在保留错误信息之前检查规格或至少MDN。没有浏览器将`transparent`视为`rgba（255，255，255，0）`，它始终是`rgba（0,0,0,0）`，不同的浏览器进行插值的方式会产生OP所要求的差异。有关更多详细信息，请查看我的答案。 (3认同)
- 嗯，我很高兴你对学习如此兴奋。我可以建议有更好的方式与我互动吗？我完全愿意接受这不是一个合理的技术答案，甚至不同的口语答案会更好，但这很好地描述了我当时所看到的内容，并导致理解解决方案。如果您愿意，我绝对可以给出一个不太正确的答案。 (2认同)
ant*_*oni 22
根据@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%);
- 最后一个答案实际上提供了解决方案。 (6认同)
我也在 Safari 中看到了这个。对我来说，它正在褪成浅红色，尽管我使用的颜色都不是接近红色的。
我使用“透明”作为值解决了这个问题。一旦我停止使用 rgba，它看起来就像预期的那样。
| 归档时间： |
|
| 查看次数： |
3811 次 |
| 最近记录： |