带有rgba的不透明白色背景在白色背景上显示灰色？
Posted
技术标签:
【中文标题】带有rgba的不透明白色背景在白色背景上显示灰色？【英文标题】：Opaque white background with rgba displays grey over white background? 【发布时间】：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) 上查看它。 【参考方案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/
【讨论】：
以上是关于带有rgba的不透明白色背景在白色背景上显示灰色？的主要内容，如果未能解决你的问题，请参考以下文章