CSS3で透明度を指定する方法

Jun 21, 2015

以前よくCSSで透明度って指定してたなーと思い、すっかりやり方を忘れてしまっていたのでいろいろ調べ、自分なりに消化したことを今更感はありますがまとめておきます。

透明度は指定方法によって適用箇所が変わります。
下の例のtest01は透明度指定なし、test02は要素全体に、test03は背景にのみ透明度を指定しています。

<p class="test01">test01</p>
<p class="test02">test02</p>
<p class="test03">test03</p>

p{
    color:blue;
    font-size:200%;
    font-weight:bold;    
    padding:10px;    
}
p.test01 {
	background-color: red;
}
p.test02 {
    background-color:red;
    filter:alpha(opacity=20); /*ie*/
    -moz-opacity: 0.2; /*Firefox*/
    opacity: 0.2; /*Opera*/
}
p.test03 {
	background: rgba(255, 0, 0, 0.2); /* RGBを10進数、不透明度を0～1.0で指定 */
}

最近あまりロールオーバーなどで透明に変化する動きを見かけなくなりました。
流行りは廃れたのかもしれませんが、覚えておきたいCSSのひとつなのでメモしました。

Pocket