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

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

      2018/10/15   hatano

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を指定するのは、それほど難しくありませんが、背景画像やグラーデーションの場合、hover時の画像を用意したり、グラーデーションの設定をする必要があります。
opacityであれば透明度の指定だけなので、hover時の指定が簡単になります。

opacityのボタンの通常時

opacityのボタン(hover時)

まとめ

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

広告

 - HTML・CSS