たとえば、次のとおりです。
コンテンツを半透明ブロックの上に配置するために不透明度と絶対配置を使用しないことをすぐに言わなければなりません。
そのため、モノフォニックの半透明の背景を持つブロックを作成する必要があります。 これを行うには、opacityプロパティを使用できますが、誰もが要素自体だけでなくその子にも適用されることを知っています。 もちろん、サブストレート要素にチートして不透明度を適用し、コンテンツ自体を別のブロックに配置してから、絶対配置を使用してこのブロックをサブストレート要素に移動できます。 しかし、この方法には重大な欠点があります。第1に、ブロックの寸法を正確に知る必要があり、第2に、余分な非セマンティック要素が追加されます。
不透明度の代わりに、指定された透明度で目的の色の単一ピクセル画像を使用する場合、これらの欠点はすべて回避できます。 ただし、この場合、余分なhttp要求が発生し、これは望ましくありません。
CSS3では、 RGBAを使用して要素の背景色を設定する機能が導入されました。これは、本質的に同じRGBですが、透明度の値を指定する機能があります。
.opacity {
background: rgba(0, 0, 0, 0.5);
}
例（RGBA）
ただし、残念ながら、RGBAを介した背景色の設定は、Safari（Chromeも）とFirefoxの新しいバージョンでのみサポートされています。 Safari、Firefox、Opera、IE8（Hurray！）の古いバージョンでは、余分なhttpリクエストを取り除くためにData：URIを使用できます：
.opacity {
background:url(data:image/png;base64,iVBORw0KGg...);
}
例（データ：URI）
iVBORw0KG...
は、単一ピクセルの半透明のbase64エンコード画像です。 このファイルの表現は非常に簡単です。 たとえば、 Data：URI image encoderを使用できます。
これら2つの方法を組み合わせると、次のようになります。
.opacity {
background:url(data:image/png;base64,iVBORw0KGg...);
background:rgba(0, 0, 0, 0.5);
}
例（RGBA +データ：URI）
この例は、FF 1.5 +、Opera 7.2 +、Safari 2 +、Chrome、Konqueror、IE 8で既に機能しています。
しかし、IE 7とIE 6で何をすべきか？ ここでは、アルファフィルターと1つの小さなトリックが役立ちます。 実際には、アルファフィルターを要素に適用し、この要素のすべての子孫に位置：相対を指定すると、奇跡的に完全に不透明になります。
.opacity {
zoom:1; /* hasLayout */
background:#000;
filter:alpha(opacity=50);
}
.opacity * {
position:relative;
}
例（IE 6および7）
だから、すべてを一緒に結合すると、
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" xml:lang ="ru" >
< head >
< title > Opacity Block </ title >
< meta http-equiv ="Content-Type" content ="text/html;charset=utf-8" />
< style type ="text/css" >
* {
margin:0;
padding:0;
}
html {
font-size:100.01%;
}
body {
font:.8em Arial, Helvetica, sans-serif;
color:#fff;
background:url(bg_pattern.jpg);
}
a {
color:#fff;
}
h1 {
font-weight:normal;
margin:0 0 .5em;
}
p {
margin:0 0 .5em;
}
.opacity {
margin:40px;
padding:20px;
background:url(data:image/png;base64,iVBORw0KG...);
background:rgba(0, 0, 0, 0.5);
}
</ style >
<!--[if lte IE 7]>
<style type="text/css">
.opacity {
zoom:1;
background:#000;
filter:alpha(opacity=50);
}
.opacity * {
position:relative;
}
</style>
<![endif]-->
</ head >
< body >
< div class ="opacity" >
< h1 > ! </ h1 >
< p > . </ p >
</ div >
</ body >
</ html >
* This source code was highlighted with Source Code Highlighter .
最終結果
この例はIE 6 +、FF 1.5 +、Opera 7.2 +、Safari 2 +、Chrome、Konqueror 4.1でテストされ、正しく動作します。 欠点のうち、IE <6では機能しません。