CSS3从透明到白色的渐变渲染问题

Posted 2023-02-16

【中文标题】CSS3从透明到白色的渐变渲染问题

【英文标题】：CSS3 gradient rendering issues from transparent to white

【发布时间】：2012-08-03 11:46:39

【问题描述】：

我在跨浏览器渲染 CSS3 渐变时遇到问题。当我尝试创建从透明颜色到白色的渐变时，就会发生这种情况。

我用来测试的文件是： http://f.cl.ly/items/0E2C062x3O161b09261i/test.html

使用的 CSS 是：

background-image: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);

在 Safari 6 (mac) 中渲染看起来像我想要的：

Chrome 渲染在渐变为白色之前渐变为灰色（Firefox 在 mac os 上也以这种方式渲染）：

对于为什么会出现这种奇怪的渲染有什么想法或建议吗？

【参考方案1】：

我也遇到过。我不确定为什么会这样，但这是我在自己的项目中使用的解决方法：

background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.001) 0%, #fff 5%, #fff 100%);

与其给 Chrome 一个“透明”的值，不如给它一个非常非常接近透明的值。希望这会有所帮助！

编辑：我忘记发布指向我自己的version 的链接，该链接在 Chrome 21 (Windows 7) 中按预期呈现。

【讨论】：

我遇到了这个问题，其中 Safari 呈现 transparent 的方式与我检查过的所有其他浏览器不同。感谢您的提示！

我相信您实际上可以使用 rgba(255, 255, 255, 0) 来获得真正的透明度 - 无论如何它对我有用 :)

这是一篇旧帖子。浏览器已经修复了与透明度相关的错误，现在可以使用：codepen.io/peiche/pen/mMKaLP

不幸的是，“透明”在 Safari 中仍然不起作用，甚至在 Safari TP 中也不起作用。这是因为“透明”被视为“透明黑色”；指定 alpha 为 0 的实际颜色有效。

@Kovensky 我设法使用具有 0 alpha 的 rgba 解决了 Safari 问题，因为它与它过渡到的颜色相同。例如。如果您想要从透明到石灰的渐变（rgb(0, 255, 0)），请使用：background: linear-gradient(top, rgba(0, 255, 0, 0), lime) 希望这可以提供帮助。编辑：刚刚注意到您在谈论相同的修复，抱歉:)

【参考方案2】：

我在这里粘贴的 CSS 错误，我编辑了错误的文件 DOH！

原始 CSS 不起作用

background-image: linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -o-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -moz-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -webkit-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -ms-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);

解决问题的 CSS

background-image: linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -o-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);

透明的问题不是颜色，它是带有 0 alpha 的黑色，设置为带有 0 alpha 的特定白色可以解决此问题。 （感谢@carisenda）

这仍然指出浏览器供应商在 CSS3 渐变中处理 alpha 透明度的方式不一致。

【讨论】：

这种解释（透明为黑色，alpha 为 0）似乎并不准确。尝试在黑色背景上使用 255、255、255、0 作为透明的从黑色到透明的渐变。会很轻。

【参考方案3】：

除白色以外的颜色（实际上是白色）的诀窍是rgba正在褪色的实际颜色。

background-image: linear-gradient(to right, 
  rgba(111,174,249, 0) 0%,
  rgba(111,174,249, 0) 80%,
  rgb (111,174,249)    100%);

如果使用的颜色是十六进制（如#6faef9），请使用a hex to rgba converter 转换颜色。

【参考方案4】：

我最近遇到了关于 Safari 透明度的相同问题。对我有用的是将 css 替换为已编译的 safari css。

这对我不起作用

 background-image: linear-gradient(to top, rgba(56,56,56,1) 5%, rgba(255,255,255,0.001) 100%)

这确实对我有用

background-image: linear-gradient(0deg,#383838 5%, hsla(0, 0%, 20%, 0) 100%)

【参考方案5】：

在原生ios上也遇到同样的问题：

iOS White to Transparent Gradient Layer is Gray https://betterprogramming.pub/the-proper-way-of-creating-a-transparent-gradient-layer-in-ios-b082daa866b1layer-is-gray

我注意到在 CSS 上的解决方案是使用白色而不是黑色，然后添加 0 透明度

rgb(255 255 255/0)