html - CSS：不透明度导致轻微的背景颜色变化

Question

我为正文设置了特定的背景颜色。然后，我想使用另一个具有相同背景颜色但 opacity: .95 的 div 作为页面底部动画内容的掩码。这导致掩蔽 div 的颜色看起来略有不同。有没有办法解决？

请参阅此处的屏幕截图和下面的示例 CSS。我在 Lion 上使用 Chrome 20。

body
{
    background: #3f3c45;  
}

#bottommask
{
    background: #3f3c45;
    opacity: .95;
}

更新：请检查这个小提琴演示这个问题

---

更新的解决方案：似乎至少在 Chrome 中，使用 -webkit-backface-visibility: hidden; 在面具 div 上解决了这个问题。

Answer 1

这是从下方计算 5% 色彩增益的效果的问题。

三种方式：

• 计算，或
• Firebug 颜色选择器的试验/错误，或
• 制作屏幕截图并采样透明颜色，然后将采样颜色应用于非 alpha 背景。

对于纹身部位，我已更改为稍微不同的颜色，以考虑不透明度的颜色变化。

body {
    background: #8d918f;
}