CSSで背景などの色を変更する場合は、red や blue などの色の名前で指定したり、16進数のカラーコードで指定します。例えば、以下のような感じですね。
p{
background:red;
color:#ffffff;
}
CSS3からは、これらの色に透明度を指定することもできるようになりました。指定する色を透明化したい時は、rgba という値を使います。
また、要素全体を透明化することもでき、要素全体を透過させる場合は opacity というプロパティを使います。
今回はこれらの透明化するスタイリングについて紹介したいと思います。
色を透明化する方法
色の透明度を指定する場合は、rgba を使って色を指定します。それぞれの値を以下のような内訳で指定します。
r：赤の値
g：緑の値
b：青の値
a：透明度
例えば、以下のような単純なHTMLがあったとします。これに背景色をつけて透明化してみたいと思います。
<div class="test">test</div>
わかりやすいようにクラス test には横幅と高さもつけます。それからまずは普通に背景色を指定してみましょう。
.test{
width:200px;
height:150px;
background:#ff0000;
}
これをブラウザで表示すると、、、
このようになりますね。この背景色を少し透明化するために rgba を使って色を指定します。RGBは0～255の数値で表すので、Rを255、その他を0にすれば赤色になります。それに 50% の透明度を指定してみましょう。
.test{
width:200px;
height:150px;
background:rgba(255,0,0,0.5);
}
これをブラウザで表示すると、、、
赤が透明化されて薄くなりました。
rgba は、このようにRGB値と透明度を指定することで、微妙な透明度も表現することができます。
要素全体を透明化する方法
rgba に似てますが、要素全体を透明化する場合は opacity というプロパティを使います。使い方は簡単で、セレクタに対して opacity で透明度を指定するだけです。
rgba と大きく違うところは、要素全体を透明化するので、色だけじゃなく画像などにも使えるところです。ということで、ここでは画像で試してみたいと思います。
HTMLは以下のようにします。
<img src="himecas.jpg" alt="これはhimecasです" />
画像を表示しているだけの簡単なものですね。
これに opacity で透明度を指定します。
img{
opacity:0.5;
}
これをブラウザで表示すると、、、
このように画像が薄くなりましたね。画像の後ろに何かある時はそれが透けて見えるようになります。
ちなみに IE にも対応させたい場合は、以下のように書きます。
img{
filter:alpha(opacity=50);
opacity:0.5;
}
あとがき
リンクのホバー時なんかに使うと効果的ではないでしょうか。
今までは画像をちょっと透過させたいだけでも別の画像を用意したりしていましたが、CSSで簡単に透過させることができるようになりました。技術の進歩は素晴らしいですね。