opacityプロパティ

最終更新日：2023-12-02
公開日：2016-06-28

HTML要素の透過度を設定するプロパティです。透かした表示にすることができます。

初期値

1
継承

不可
適用できる要素

全要素

opacityプロパティに指定できる値

opacityプロパティには透過の度合いを0.0〜1.0の範囲で値を指定することができます。
初期値でもある1.0は透過なしの状態になり、0.0は完全な透過状態です。

以下の例では3つの要素に対してそれぞれ異なるopacityプロパティの値を指定しています。

CSS コード例

.pic01 {
  opacity: 1.0;
}
.pic02 {
  opacity: .5;
}
.pic03 {
  opacity: .2;
}

HTML コード例

<div class="sample1">
  <div>
    <h2>opacity: 1.0;</h2>
    <figure class="pic01"><img src="./images/pic_s00.jpg" alt="サンプル画像"></figure>
  </div>
  <div>
    <h2>opacity: 0.5;</h2>
    <figure class="pic02"><img src="./images/pic_s00.jpg" alt="サンプル画像"></figure>
  </div>
  <div>
    <h2>opacity: 0.2;</h2>
    <figure class="pic03"><img src="./images/pic_s00.jpg" alt="サンプル画像"></figure>
  </div>
</div>

ブラウザで表示してみると、次のように透過度合いの差が出ます。

背景に色を敷いた親要素のみ透過させたいとき

opacityプロパティは透過して表示するときに便利ですが、子孫要素も一緒に透過してしまう性質があります。
そのため、背景画像のみ透過させたいときに親要素にopacityプロパティを使うと意図しない表示になってしまうことがあります。

もし背景色を敷いた親要素のみを透過させたいときは、opacityプロパティではなくbackground-colorプロパティのrgba指定で透過度を設定する方法が便利です。

CSS コード例

.sample2 .o1 {
  opacity: 0.5;
  background-color: #c7c754;
}
.sample2 .o2 {
  background-color: rgba(199,199,84,0.5);
}

HTML コード例

<div class="sample2">
  <div class="o1">
    <h2>opacity: 0.25;</h2>
    <p>子孫要素は透過させたくないというとき</p>
  </div>
  <div class="o2">
    <h2>opacity: 0.25;</h2>
    <p>子孫要素は透過させたくないというとき</p>
  </div>
</div>

以下はブラウザで表示した例です。
左側はopacityプロパティで指定した場合、右側はbackground-colorプロパティで指定した場合の表示です。
background-colorプロパティは意図した表示になることを確認できます。

背景に画像を敷いた親要素のみ透過させたいとき

背景に画像を表示したいときはbackground-colorプロパティを使うことができないため、背景画像用の::beforeや::afterのような擬似要素にopacityプロパティを指定します。

CSS コード例

.sample3 .o1 {
  opacity: 0.25;
  background: url(./images/pic_s00.jpg) left top / 100% auto no-repeat;
}
.sample3 .o2 {
  position: relative;
}
.sample3 .o2::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -5;
  width: 100%;
  height: 100%;
  opacity: 0.25;
  background: url(./images/pic_s00.jpg) left top / 100% auto no-repeat;
}

HTML コード例

<div class="sample3">
  <div class="o1">
    <h2>opacity: 0.25;</h2>
    <p>子孫要素は透過させたくないというとき</p>
  </div>
  <div class="o2">
    <h2>opacity: 0.25;</h2>
    <p>子孫要素は透過させたくないというとき</p>
  </div>
</div>

以下はブラウザで表示した例です。
左側は親要素に直接opacityプロパティを指定した場合、右側は擬似要素::beforeにopacityプロパティを指定した場合の表示です。
擬似要素を使った方法は意図した表示になることを確認できます。

記事一覧