带有rgba的不透明白色背景在白色背景上显示灰色？答案

【问题标题】：Opaque white background with rgba displays grey over white background?带有rgba的不透明白色背景在白色背景上显示灰色？
【发布时间】：2013-11-27 14:58:15
【问题描述】：

我在一个 div 上添加了一个透明背景，在一个白色背景上像这样：

body {
    background: white;
}

.opaque-white {
    background: rgba(255,255,255,0.95);
    height: 300px;
    width: 300px;
}

<body>

    <div class="opaque-white">
        Area with opaque (opacity: 0.95) background.
    </div>

</body>

JSFiddle 链接：http://jsfiddle.net/DvYCA/4/

但由于某种原因，div 的颜色显示为灰色而不是白色。白色上的不透明白色应该显示...白色，对吗？

还是我弄错了？

编辑：我正在添加问题的屏幕截图。这是一个非常微妙的差异，但在某些屏幕上很明显。要真正理解差异，请尝试用右侧区域选择图像左侧的颜色。

【问题讨论】：

你用的是IE5、Netscape还是什么的？
@j08691 哈哈，每当有人提到白色的东西时，我都会使用它:')
并非所有浏览器都支持RGBA，这可能是问题所在：css-tricks.com/rgba-browser-support
您在哪个浏览器中看到了这种行为？我在最新的 Firefox 25 中没有看到它
我在 Mac OS 的最新 Chrome 版本 (31) 上查看它。

标签： css colors opacity

【解决方案1】：

这不是你的屏幕。拾色器不会说谎。我发现该错误仍然存在于 Chrome 38 和 Canary 40 中。对我有用的是将 transform: translateZ(0); 添加到 .opaque-white div。

【讨论】：

也为我工作

【解决方案2】：

看起来像一个错误：Chrome 合成并输出 rgb(254,254,254)，而 Safari 输出 rgb(255,255,255)。有趣的是，您使用什么 alpha 值似乎并不重要，Chrome 总是输出相同的颜色。只有当您的 alpha 值为 0 或 1 时，它才会显示全白，介于两者之间的任何内容都会导致微妙的灰白色。

【讨论】：

【解决方案3】：

我遇到了这个问题，发现在两个不同的显示器之间可以观察到差异。

在我的主显示器上我看到灰色，而在我的辅助显示器上我看到白色。

不同的显示技术使用略有不同的算法来计算每个像素要显示的内容，并且任何显示技术都可能以各种可能影响精确度的方式退化。

我也发现视角可以强调效果http://www.techmind.org/lcd/colour.html。

尝试在不同的显示器上查看您的网站/示例。

【讨论】：

【解决方案4】：

您的屏幕截图似乎显示了所需的效果 - 在我看来它是白色的，在 Photoshop 中打开它显示一侧为 255,255,255，另一侧为 254,254,254。

您是否在其他显示器上检查过？在我看来，解决方案（或更确切地说是问题）实际上是本地的 - 可能是您的屏幕或一些损坏的 .icm 文件。

您可以尝试使用十六进制值和不透明度属性吗？

.opaque-white {
background: #ffffff;
opacity:.95;
}

这是一个小提琴：http://jsfiddle.net/Gv59a/

【讨论】：