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

Question

我已经为正文设置了特定的背景颜色。然后我想使用另一个具有相同背景颜色但不透明度为 .95 的 div 作为从页面底部动画内容的蒙版。这导致掩蔽 div 看起来颜色略有不同。有什么办法解决这个问题吗？

看截图here和下面的示例 CSS。我在 Lion 上使用 Chrome 20。

body
{
    background: #3f3c45;  
}

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

更新:请查看 this fiddle证明问题

---

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

Answer 1

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

三种方式:

• 计算，或者
• 使用 Firebug 颜色选择器进行试错，或者
• 截屏并对透明颜色进行采样，然后将采样颜色应用于非 alpha 背景。

对于纹身部位，我已更改为略有不同的颜色，以解决不透明度的颜色偏移问题。

body {
    background: #8d918f;
}