html - CSS: 不透明度によって背景色がわずかに変化する

Question

ボディに特定の背景色を設定しました。次に、ページの下部からアニメーション化されるコンテンツのマスクとして、同じ背景色で不透明度 .95 の別の div を使用したいと考えています。これにより、マスキング div がわずかに異なる色に見えます。これを回避する方法はありますか？

こちらのスクリーンショットと、以下のサンプル CSS を参照してください。Lion で Chrome 20 を使用しています。

body
{
    background: #3f3c45;  
}

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

更新：問題を示すこのフィドルを確認してください

---

更新された解決策：少なくともChromeでは、 -webkit-backface-visibility: hidden; を使用しているようです。マスク div で問題を解決します。

Answer 1

それは、下から 5% のカラー ゲインの効果を計算することです。

3 つの方法:

• 計算する、または
• Firebug カラーピッカーでの試行錯誤、または
• スクリーンショットを作成し、透明色をサンプリングしてから、サンプリングした色を非アルファ背景に適用します。

タトゥー サイトでは、不透明度のカラー シフトを考慮して、わずかに異なる色に変更しました。

body {
    background: #8d918f;
}