7

图片应该说明一切。左边是 Safari 6，右边是 Chrome。不仅透明红色渐变的下半部分完全错误（这可能是过度预乘 alpha 的情况），上半部分也更暗，这看起来像是伽马校正问题。

此问题出现在 Mountain Lion 上的 Safari 6 和 iOS6 Mobile Safari 上，但不会出现在 Lion 上的 Safari 6 上。

http://jsfiddle.net/ZUTYm/4

有没有人找到获得预期结果的解决方案？我需要我的渐变来涉及 alpha，因为我正在尝试淡入淡出文本。

由于在输入实际代码之前无法完成编辑，因此这里是渐变定义：background-image: -webkit-linear-gradient(top, red, rgba(255,128,128,0), white);

在此处输入图像描述

4

1 回答 1

4

我能够在 Mac 10.8.1 Safari 6.0 (8536.25) 和 iOS Safari 6.0.1 上重现该问题。我认为应用 a-webkit-mask-image而不是透明色标可以避免这个问题：

.grad-bg {
    background-image: 
        -webkit-linear-gradient(top, #ff0000, #fff);
    height: 100%;
}

.masked {
    -webkit-mask-image:
        -webkit-linear-gradient(top, white, transparent, white);
}

jsFiddle

在图像中，顶部显示在白色背景上，底部形状显示在相同颜色的不透明渐变背景上。

顶部显示在白色背景上，底部形状显示在相同颜色的不透明渐变背景上。

（许多编辑。）

于 2012-12-11T04:05:54.063 回答