渐变在 iOS 移动 safari 上给出错误的颜色

Posted 2023-03-15

【中文标题】渐变在 iOS 移动 safari 上给出错误的颜色

【英文标题】：Gradients give the wrong color on iOS mobile safari

【发布时间】：2016-04-19 09:18:47

【问题描述】：

我正在使用 Cordova Phonegap 开发一个移动应用程序，该应用程序使用相互叠加的渐变。在 android 上一切正常，但在 ios 上，渐变显示不同。边缘是绿色的，而当我在浏览器中预览它时，它应该是蓝色的。页面底部还有这个奇怪的过渡。

这是我的 CSS：

#gradient2Layer1 
position: fixed;
height: 100px;
bottom: 0;
left: 0;
height: 20%;
width: 100%;
color = "blue";
background:  -webkit-linear-gradient(270deg, rgba(15,431,28,0) 35%, #b3c6ff 50%,rgb(128,128,128) 100%);
z-index: 100;  

#gradient2Layer2 
position: fixed;
height: 100px;
bottom: 0;
left: 0;
height: 20%;
width: 100%;
opacity: 0.5;
color = "blue";
background:  -webkit-linear-gradient(270deg, rgba(15,431,28,0) 35%, blue 50%, blue 100%);
animation: fadeIn 5s infinite alternate;
z-index: 100;  

我该如何解决这个问题？

【问题讨论】：

rgba(15,431,28,0) ? 431 如何适应 0..255 范围？难怪那是一种鲜绿色。

嗯，这当然是一个疏忽，但 android 版本的代码也有同样的错误，而且它按预期工作

如果我是 Safari，我会将此值剪裁为 255，因此 rgba(15,255,28,0) 将是亮绿色。仍然是透明的，但是非常非常明亮的绿色。

嗯，这可能是问题的根源。我想我从其他地方复制了代码。无论如何，不​​透明度设置为 0，所以不知道我为什么包含它。也许 Android 没有显示它，因为它识别了 0 不透明度而 iOS 没有

从完全透明的绿色到完全不透明的白色的渐变仍会显示绿色像素。在任何图像编辑器中尝试。

【参考方案1】：

我真的认为这是一个错字，您想使用 rgba(15,43,128,0)（这是您要寻找的蓝色阴影）而不是 rgba(15,431,28,0)，这甚至不是一个有效的 RGB 值（限制为 0. .255)。

【讨论】：

啊，原来如此。谢谢！