単純な半透明の背景色の場合、上記のソリューション（CSS3またはbg画像）が最適なオプションです。ただし、より洗練された操作（アニメーション、複数の背景など）を実行したい場合、またはCSS3に依存したくない場合は、「ペインテクニック」を試すことができます。
.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
position: relative;
}
.pane > .back {
position: absolute;
width: 100%; height: 100%;
top: auto; bottom: auto; left: auto; right: auto;
}
.pane > .cont {
position: relative;
z-index: 10;
}
<p class="pane">
<span class="back" style="background-color: green; opacity: 0.6;"></span>
<span class="cont" style="color: white;">Hello world</span>
</p>
この手法は、外側のペイン要素の内側に2つの「レイヤー」を使用することで機能します。
- コンテンツのフローに影響を与えずにペイン要素のサイズに適合する1つ（「背面」）
- 1つ（「cont」）にはコンテンツが含まれ、ペインのサイズを決定するのに役立ちます。
position: relativeペインのは重要です。ペインのサイズに合うようにバックレイヤーに指示します。（<p>タグを絶対にする必要がある場合は、ペインをaからa <p>に変更<span>し、絶対位置<p>タグですべてをラップします。）
この手法が上記の同様の手法よりも優れている主な利点は、ペインのサイズを指定する必要がないことです。上記のコードのように、全幅（通常のブロック要素レイアウト）に収まり、コンテンツと同じ高さになります。外側のペイン要素は、長方形である限り、任意のサイズにすることができます（つまり、インラインブロックは機能しますが、従来のインラインは機能しません）。
また、背景に多くの自由を与えます。バックエレメントに何でも自由に配置でき、コンテンツのフローに影響を与えません（複数のフルサイズのサブレイヤーが必要な場合は、絶対位置、幅/高さ：100％、上部/下部/左/右：自動）。
背景インセットの調整（上/下/左/右による）および/または背景の固定（左/右または上/下のペアの1つを削除することによる）を許可する1つのバリエーションは、代わりに次のCSSを使用することです。
.pane > .back {
position: absolute;
width: auto; height: auto;
top: 0px; bottom: 0px; left: 0px; right: 0px;
}
書かれているように、これはFirefox、Safari、Chrome、IE8 +、Operaで機能しますが、IE7とIE6には追加のCSSと式、IIRCが必要ですが、前回確認したところ、2番目のCSSバリエーションはOperaで機能しません。
注意点：
- contレイヤー内のフローティング要素は含まれません。それらがクリアされているか、そうでなければ封じ込められていることを確認する必要があります。そうしないと、底から滑り落ちます。
- マージンはペインエレメントに配置され、パディングはcontエレメントに配置されます。反対（contのマージンまたはペインのパディング）を使用しないでください。そうしないと、ページが常にブラウザーウィンドウよりもわずかに広いなどの奇妙なことがわかります。
- 前述のように、全体がブロックまたはインラインブロックである必要があります。CSSを簡略化するために、
<div>sではなく<span>sを自由に使用してください。
より完全なデモではdisplay: inline-block、と組み合わせて、およびauto＆と特定widthのs / min-heights を組み合わせて使用することにより、この手法の柔軟性を示しています。
.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
position: relative;
width: 175px; min-height: 100px;
margin: 8px;
}
.pane > .back {
position: absolute; z-index: 1;
width: auto; height: auto;
top: 8px; bottom: 8px; left: 8px; right: 8px;
}
.pane > .cont {
position: relative; z-index: 10;
}
.debug_red { background: rgba(255, 0, 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.75); }
.debug_green { background: rgba(0, 255, 0, 0.5); border: 1px solid rgba(0, 255, 0, 0.75); }
.debug_blue { background: rgba(0, 0, 255, 0.5); border: 1px solid rgba(0, 0, 255, 0.75); }
<p class="pane debug_blue" style="float: left;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.
</span>
</p>
<p class="pane debug_blue" style="float: left;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.
</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.
</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto; min-height: auto;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.
</span>
</p>
そして、これは広範囲に使用されているテクニックのライブデモです：
