テキストはそのままで背景だけを透過させる

opacityだと子要素まで透過する

CSSで透過させるには、opacityとかalphaが思いつくわけですが、これって意図しない個所まで一緒に透過させてしまうんですよね。例えば、

<div class="box">
	<p>テキストとか画像とか</p>
</div>
.box {
	background: #ffffff;
	opacity: 0.3;
}

という場合、boxにopacityを指定してもpまで効いてしまいます。

背景だけを透明にする

テキストは不透明のままで背景だけを透明にしたい場合は、CSSの「rgba()」を使うと簡単に実現できます。backgroudに対して以下のように記述すると、

.box {
	background: rgba(255,255,255,0.3);
}

こんな感じに背景だけを透過してくれます。

rgbaの記述は以下のような構造になっています。

最初の3つの数値がRGBで色を指定する個所、最後の値が透明度を指定する個所です。例えば、さきほどの上のコードの場合は、RGB「255,255,255」で白を指定、これに対して「0.3」の透明度を指定、といった具合です。

RGBの値が分からないという人は、ウェブ上には通常の「#ffffff」などの16進数のカラーコードからRGBの数値へ変換してくれるカラーコード変換ツールさんなどがあるので、これを利用すれば簡単です。

1点だけ注意点

opacityもそうなんですが、rgbaはIE8以下には対応していません。なので、もし「IE8以下も含めてrgba()がしたい!」という場合は、IE独自のフィルター「filter:progid:DXImageTransform.Microsoft.Gradient()」を使います。例えば、「背景を白・透明度0.3」としたい場合は、

.box {
	background: rgba(255,255,255,0.3);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#33ffffff', endColorstr='#33ffffff');
}

のように、rgbaの後にIE独自のフィルターを追加してあげるだけでOKです。長いコードですが、必要なのは後ろに記述された2つの#の場所で以下のような構成になっています。

#以降はAARRGGBBという8桁構成です。最初の2桁は透明度を指定する個所で「00(透明)~ff(不透明)」で指定します。Photoshopを使う人ならマスクを思い出してください。黒(#000)なら透明、白(#fff)なら不透明ですよね。で、残りの6桁で背景所をRRGGBBで指定します。例えば白なら「#ffffff」、黒なら「#000000」です。

ただ、上記のフィルターって色や透明度を指定する場所が2つありますよね。これは、元々グラデーションを表現するために使うものだからです。コードを良く見ると、「StartColor」とか「EndColor」と書いてありますよね。

なので、もしもグラデーションを表現したい場合は、StartとEndの色や透明度を変えてあげればOKです。ちなみに、その前にある「GradientType」は、「0=縦に変化」「1=横に変化」となります。