Question

我在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>

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

或者我错了？

编辑：我正在添加问题的屏幕截图。这是一个非常微妙的差异，但在某些屏幕上却很明显。要真正了解差异，请尝试使用正确的区域选择图像左侧的颜色。 Difference between white and transparent-white-over-solid-white :)

Answer 1

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

Answer 2

看起来像一个错误：Chrome组合并输出rgb（254,254,254），而Safari输出rgb（255,255,255）。有趣的是，您使用的alpha值似乎并不重要，Chrome始终输出相同的颜色。如果您的alpha值为0或1，它只会显示全白色，中间的任何内容都会产生微妙的灰白色。

Answer 3

您的屏幕截图似乎显示了所需的效果 - 它对我来说显得很白，在photoshop中打开它显示一侧为255,255,255，另一侧为254,254,254。

你在另一台显示器上检查过吗？在我看来，解决方案（或问题）实际上是本地的 - 可能是您的屏幕或一些损坏的.icm文件。

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

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

Answer 4

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

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

不同的显示技术使用稍微不同的算法来计算每个像素的显示内容，并且任何显示技术可能会以各种方式降级，从而影响精确度。

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