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のひとつなのでメモしました。