CSS3で透明度を指定する方法
以前よく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のひとつなのでメモしました。
