14

我在一个 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 的颜色显示为灰色而不是白色。白色上的不透明白色应该显示...白色，对吗？

还是我弄错了？

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

4

4 回答 4

8

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

于 2014-10-14T12:39:54.553 回答
1

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

于 2014-09-29T16:49:45.507 回答
0

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

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

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

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

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

于 2014-03-18T03:53:40.903 回答
0

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

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

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

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

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

于 2014-06-19T13:12:48.210 回答