CSSのopacityの概要
注意 ※バージョンや環境によっては意図通り動作しない可能性があります。
使用したCSSを忘れないようにメモって行きます。1つ目はopacityです。
画像にも適用できるので、使いどころはたくさんあります。
hoverで画像を薄くしたり、なんてのはブログなどでも良く見ます。
主要ブラウザではほぼ使える要素です。
W3Cのopacityについては以下で。
MozillaのMDNは以下です。
opacityとは
opacity要素では不透明度を設定できます。
不透明度は要素の裏にあるコンテンツが隠れる度合いであると、MDNにはあります。
そのため、1が表示で0が透明です。
opacityの設定例
<div class="opadity-1"> opacity : 0.1 </div>
.opadity-1 {
opacity : 0.1 ;
background-color: #f1f1ff;
}
設定はすごく簡単で、opadity-1クラスを作って、そこに不透明度を設定しているだけです。
文字色はテーマで設定されているデフォルトのもので、背景色を自分で設定していますが、opadity-1が影響する要素全てに不透明度が反映されています。
背景だけに不透明度を指定する、などをしたい場合は、opacityではなく色指定でrgba()を使ったりして、透明度を設定します。rgba()は対応していないブラウザもあるので注意が必要です。
CSSはこのブラウザの対応が難しいですね～。仕事で対応ブラウザを明示している場合は、そういう確認が厄介です。どこかでバッサリ行きたいのですが、様々なしがらみなどでなかなかできないのが現実ですね。
その点opacityは使い勝手がよさそうです。
opacityの設定方法
初期値（opacityを設定しない場合）は1です。
0が完全に透明で、1が完全に不透明です。
0.0～1.0で設定できます。%設定もできるようですが、この記事を書いている段階では対応ブラウザが限られるようです。
0は完全に透明ではありますが、レイアウトは残りますし、マウスオーバーやリンクは生きているので、何もないのにクリックできたりします。
透明度0でリンクなどを扱う場合は、visibility:hiddenを併用するなど、別の対応が必要になります。
opacityとhover
<div class="opacity-4"> よくあるhoverでopacity。この要素にマウスオーバーすると透明度が変わる。 </div>
.opacity-4 {
background-color: #f1f1ff;
}
.opacity-4:hover {
opacity: 0.5;
}
よくある透明度変更の例です。
マウスオーバーすることでopacityが切り替わります。
リンクが貼られている画像に対して良く行われる処理です。
ブログで良くある形です。
transitionと併用されることも多く、いろんなところで使われている設定です。
