HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

応用54. 要素の透明度の指定(opacity)

      2017/07/11

opacityプロパティ(オパシティ)

要素に対して透明度の指定ができます。
CSS3で追加されたプロパティです。
ベンダープレフィックスは不要
※Internet Explorer 9以上から対応

opacityプロパティの各ブラウザの対応状況
Can I use -opacity-

値は0〜1の範囲で指定します。
0.0が透明、1.0が不透明となり、中間の透明度は小数点で指定します。
例えば、0.1の場合は、10%。0.8の場合は、80%となります。

注意点として、透明度は指定した要素だけでなく、指定した要素内にも透明度が適用される点です。
下記のコードは、指定したdivタグだけでなく、要素内のpタグとテキストにも透明度が適用されることがわかります。
コードで使用した画像は、下記からダウンロードできます。

opacity_bg.zip

opacityで透過

opacityの使い方の一例として、a要素のhover時に透明度を指定する方法です。
hover時のbacground-colorを指定するのは、それほど難しくありませんが、背景画像やグラーデーションのbackground-imageの場合、hover時の画像を用意したり、グラーデーションの設定をする必要があります。
opacityであれば透明度の指定だけなので、指定が簡単になります。

opacityのボタンの通常時

opacityのボタン(hover時)

まとめ

  • opacityは、要素の透明度の指定
  • 値は、0.0(透明)〜1.0(不透明)の間で指定する
  • opacityを指定した要素だけでなく、要素内も透明度が適用される

 - HTML・CSS