応用54. 要素の不透明度の指定（opacity）

opacityプロパティ（オパシティ）

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

値は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の使い方の例として、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は、要素の不透明度の指定
• 値は、0.0（透明）〜1.0（不透明）の間で指定する
• opacityを指定した要素だけでなく、要素内も不透明度が適用される