記事内に広告が含まれています。

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

Apr 21, 2015

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

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

See the Pen axvmZZ by natsuki (@natsukimemo) on CodePen.

<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;
    opacity: 0.2; /*←要素全体を透明に*/
}
p.test03 {
    background: rgba(255, 0, 0, 0.2); /* ←背景に透明度を指定 */
}

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