[解決済み] CSS background-image-opacity?

質問

関連項目 CSSでテキストや画像の背景を透明にするには？ が、少し違います。

背景のアルファ値を変更することが可能かどうか知りたい。 画像 色だけではありません。もちろん、異なるアルファ値で画像を保存することはできますが、アルファ値を動的に調整できるようにしたいのです。

今のところベストは

<div style="position: relative;">
    <div style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;
                      background-image: url(...); opacity: 0.5;"></div>
    <div style="position: relative; z-index: 1;">
        <!-- Rest of content here -->
    </div>
</div>

うまくいくのですが、かさばるし、醜いし、複雑なレイアウトでは台無しになります。

解決するには？

背景が繰り返される必要がない場合は、スプライト技法（スライドドア）を使って、不透明度の異なる画像をすべて1つにまとめ（隣り合わせに）、あとは background-position .

また、ターゲットブラウザが以下をサポートしている場合、同じ部分透過背景画像を複数回宣言することもできます。 複数の背景 (Firefox 3.6+, Safari 1.0+, Chrome 1.3+, Opera 10.5+, Internet Explorer 9+). 複数の画像の不透明度は、背景を定義すればするほど加算されるはずです。

このように透明なものを組み合わせる作業を アルファブレンディング と計算されます（@IainFraserさんありがとうございます）。

αᵣ = α₁ + α₂(1-α₁) ここで α は 0 から 1 の範囲である。