HTMLとCSSが分かりやすく学べるサイト

  1. ホーム
  2. HTML・CSS
  3. 応用54. 要素の不透明度の指定(opacity)

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

  1. 公開日:2016年11月01日
  2. 最終更新日:2023年01月17日

HTML・CSS

この記事をシェアする:

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

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

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

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


.box{
  /* 不透明度10% */
  opacity: 0.1;
}

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


<div class="wrap">
  <div class="box">
    <p>テキスト</p>
  </div>
</div>


.wrap{
  width: 600px;
  height: 600px;
  padding-top: 150px;
  background-image: url(../image/bg.jpg);
}
.box{
  /* 不透明度50% */
  opacity: 0.5;
  width: 300px;
  height: 300px;
  line-height: 300px;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  text-align: center;
  font-weight: bold;
  font-size: 50px;
}
.box p{
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  background-color: #000;
  color: #fff;
}

opacityで透過

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


<div class="btn"><a href="#">ボタン</a></div>


.btn{
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.btn a{
  display: block;
  height: 60px;
  line-height: 60px;
  border-radius: 10px;
  background-color: #333;
  background-image: -webkit-linear-gradient(#888, #333);
  background-image: linear-gradient(#888, #333);
  text-decoration: none;
  text-align: center;
  font-size: 20px;
  color: #fff;
}
.btn a:hover{
  opacity: 0.9;
}

opacityのボタンの通常時

opacityのボタン(hover時)

まとめ

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