Question

在Photoshop中生成透明像素。

在PC上它看起来像是预期的，在iPhone上它看起来更暗。

div {
    background-image: url('/images/pixel-white.png');
}

浏览器：

PC - Chrome版本22.0.1229.96 m

iPhone - 21.0.1180.82

像素： PNG-24 /透明层：rgb 255 255 255，透明度60％

问题：如何在PC，iPhone和所有其他浏览器上使这个像素看起来相同？

增加：

enter image description here

Answer 1

应该有一个非常特殊的原因，你不只是使用：

background: rgba(255,255,255,0.6);

或类似的东西。

（这不是评论，请使用rgba。）

Answer 2

如何在PC和iPhone上使这个像素看起来相同？

你做不到。它不仅取决于浏览器，还取决于操作系统和显示设备，以及使用设备的用户如何配置显示器。

这是您无法在图像内部或服务器端控制的内容，尤其是当您尝试在此处比较不同的计算机系统时。

Answer 3

为了与所有浏览器（IE6 +）实现100％兼容，我使用了以下帖子中的推荐：

即使上述主题仅用于移动Safari浏览器 - 我确认设置透明像素超过1px宽度/高度的做法正在解决所有主要浏览器（IE6 +）的外观不一致的问题。 / p>

换句话说，根据PNG的RFC http://www.ietf.org/rfc/rfc2083.txt，您的透明像素需要至少2px宽/高才能在所有浏览器中看起来像预期的那样。