53

我在跨浏览器渲染 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) 中想要的： Safari 6 Mac OS 10.8

Chrome 渲染在变为白色之前会变为灰色（Firefox 在 mac os 上也以这种方式呈现）： 铬 21 Mac OS 10.8

关于为什么会出现这种奇怪的渲染的任何想法或建议？

4

5 回答 5

90

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

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

与其给 Chrome 一个“透明”的值，不如给它一些非常非常接近透明的东西。希望这可以帮助！

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

于 2012-08-06T13:46:26.480 回答
29

我在这里粘贴的 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 透明度的不一致。

于 2012-08-06T14:01:27.460 回答
5

除了白色（实际上是白色）之外的颜色的技巧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），请使用十六进制到 rgba 转换器来转换颜色。

于 2019-11-18T20:00:58.707 回答
3

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

  1. iOS白色到透明渐变层是灰色
  2. https://betterprogramming.pub/the-proper-way-of-creating-a-transparent-gradient-layer-in-ios-b082daa866b1layer-is-gray

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

rgb(255 255 255/0)
于 2021-08-02T20:44:29.273 回答
1

我最近遇到了关于 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%)
于 2021-02-22T07:47:26.150 回答