3

我注意到 iOS5 和 iOS6 上的 Mobile Safari 处理 -webkit-radial-gradient 的方式不一致，我想在 webapp 中进行纠正。

举个例子：

div {
    width:100%;
    height:100%;
    background-color: black;
    background-image: -webkit-radial-gradient(center center, circle cover, rgba(255,255,255,1), rgba(0,0,0,0) 75%);
    position:absolute;
}

应用于

<div>&nbsp;</div>

可查看/可编辑：http: //jsfiddle.net/kJ8z3/3/ 对于移动设备： http: //fiddle.jshell.net/kJ8z3/3/show/

出于某种原因，iOS6 上的渐变“更强”。

桌面上的 Google Chrome (WebKit 537.4) 或 Safari (Webkit 534.57.2) 的更新版本会产生更类似于 iOS5 的渐变，因此它可能不是直接的 WebKit 问题。

两种设备都报告了 32 位颜色深度 (screen.colorDepth)，但是来自 iOS5 的渐变似乎显示了条带指示性伪影或较低的颜色深度。谷歌浏览器报告 32 位深度，但比桌面 Safari 有更多条带，后者只报告 24 位颜色深度。

知道发生了什么吗？或者更重要的是，从实际的角度来看，我如何调和两者之间的差异？我想要一个相同渲染的径向渐变，alpha 透明度从白色渐变为透明。

4

1 回答 1

0

在我看来，它似乎全面“有效”。这只是它在操作系统、设备等之间工作得如何的问题。为了帮助解决 Photoshop 中的条带问题，在渐变中添加第三种，有时是第 5 种颜色对视觉效果有很大帮助。它减少了程序负责的颜色转换量（它确实必须计算它们......）。

无论如何，我在你的渐变中添加了第三种颜色，它使事情变得更加紧密。 http://fiddle.jshell.net/8U46E/

如果您不是 Photoshop 专家/gal，此站点可能会有所帮助：http: //www.colorzilla.com/gradient-editor/

于 2012-12-29T17:01:34.753 回答