css - 带有 rgba 的不透明白色背景在白色背景上显示灰色?

标签 css colors opacity

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

还是我错了?

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

最佳答案

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

关于css - 带有 rgba 的不透明白色背景在白色背景上显示灰色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19980370/

相关文章:

html - 具有多个类的 Sublime 2 自动完成 html

javascript - 将 ARGB 转换为 RGBA 格式

javascript - 如何使用颜色渐变推导出颜色的相对百分比值

css - 不考虑背景颜色 rgba 不透明度的标签

javascript - 如果不适用于 Javascript 中的 .innerHTML

css - IE8 中的不透明度不起作用

css - IE7 不通过 SSL 缓存 CSS 图像

javascript - 在 <div> 元素中放置背景图像时不显示任何内容

javascript - 如何更改线路共享插件的图像图标

colors - 如何从 fmt 中隐藏 ANSI 颜色转义代码