今回はCSSのopacityプロパティを使って、画像などの様々な要素を透過させる方法を解説します。

CSSのopacityの書き方

CSSではopacityというプロパティで透明度（透過度）を指定することができます。書き方は以下のようになります。

◯◯ {
	opacity: 透過度;
}

◯◯はセレクタで、透明にしたいものを指定します。
透過度には、通常0〜1の数値を入れます。0だと完全透明、0.5だと不透明度50%、1だと不透明です。初期値は1で、50%のような百分率も指定できます。範囲外の数値は無効になるのではなく、計算値で0〜1に制限されます。例を見てみましょう。

opacity: 1（初期値）

CSSコード
img {
  display: block;
  box-sizing: content-box;
  width: 80px;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 1;
}
ブラウザ表示サルワカくんの顔（通常）

画像（img）に対してopacity: 1を指定しています。1.0だと完全不透明です。この例では、ほかにopacityを指定していないので初期値と同じ表示です。ただし、親にopacityが指定されていれば、画像も親と一緒に透過します。

opacity: 0.5

CSSコード
img {
  display: block;
  box-sizing: content-box;
  width: 80px;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0.5;
}
ブラウザ表示サルワカくんの顔（通常）

opacity:0.5だと透明度は50%です。

opacity: 0.1

CSSコード
img {
  display: block;
  box-sizing: content-box;
  width: 80px;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0.1;
}
ブラウザ表示サルワカくんの顔（通常）

opacity:0.1だと不透明度が10%しかありません。つまり消えかけです。0にすると完全透明になり、全く見えなくなります。

ブラウザ対応状況：ベンダープレフィックスは必要？

下の画像は、各ブラウザの対応状況です（2018年1月時点）。

各ブラウザのopacity対応状況

CANIUSE：opacity

現在の主要ブラウザは標準のopacityに対応しており、ベンダープレフィックスは不要です。上の画像は2018年1月当時の資料として残しています。最新の対応状況はCANIUSEのリンクで確認できます。

画像hover時に透過させる方法

opacityで画像ホバー時（カーソルを上に重ねたとき）に画像をうっすらと透明にさせるには以下のように書きます。ここでは画像をbuttonで囲み、キーボードでフォーカスしたときにも同じ変化を確認できるようにしています。

HTMLコード
<button class="example" type="button" aria-label="画像の透明度を試す">
  <img src="https://saruwakakun.com/wp-content/uploads/2016/11/IMG_9164.jpeg" alt="サルワカくんの顔（通常）" width="120" height="119" />
</button>
CSSコード
.example {
  display: block;
  box-sizing: content-box;
  width: 80px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.example:focus-visible {
  outline: 2px solid #f89174;
  outline-offset: 3px;
}

.example img {
  display: block;
  box-sizing: content-box;
  width: 80px;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 1;
  transition: opacity .3s;
}

.example img:hover, .example:focus-visible img {
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  .example img {
    transition: none;
  }
}
画像をホバー時に透過させる例
公開当時の動きを記録したGIF
ホバー・フォーカスで試す

クラス名がexampleの要素内のimgをホバー時に不透明度50%にする指定です。:focus-visibleはbuttonへのキーボードフォーカスにも対応します。このようなセレクタの書き方がよく分からないという方はこちらの記事をどうぞ。

あわせて読みたいCSSのセレクタとは？覚えておきたい25種類と書き方

transition: opacity .3sは、opacityの変化を0.3秒かけて滑らかにするためのものです。無くても問題なく透明になります。このコピー例では、prefers-reduced-motion: reduceの場合はtransitionを省略します。

逆にカーソルを当てると浮かび上がるようにするには

さきほどの例とは逆に、「カーソルを当てると、画像が浮かび上がるようにする」には以下のように書けばOKです。HTMLは直前の例と同じbuttonとimgを使い、CSSを以下に置き換えます。キーボードのフォーカスでも同じ変化を確認できます。

CSSコード
.example {
  display: block;
  box-sizing: content-box;
  width: 80px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.example:focus-visible {
  outline: 2px solid #f89174;
  outline-offset: 3px;
}

.example img {
  display: block;
  box-sizing: content-box;
  width: 80px;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0.1;
  transition: opacity .3s;
}

.example img:hover, .example:focus-visible img {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .example img {
    transition: none;
  }
}
カーソルを当てると不透明に
公開当時の動きを記録したGIF
ホバー・フォーカスで試す

はじめにopacity:0.1としておいて、ホバー時にopacity:1にしているわけですね。

文字もopacityで透過できる？

できます。指定の仕方も同じです。

HTMLコード
<p class="opa">こんにちは</p>
CSSコード
.opa {
  margin: 0;
  padding: 0;
  font: 16.15px/1.9 sans-serif;
  color: #333;
  opacity: 0.3;
}
ブラウザ表示

こんにちは

文字の不透明度が30%となっているのが分かるかと思います。ただし、opacityは文字だけでなく、要素の背景や子要素を含めた全体をまとめて透過させます。文字色だけを透過させたいときは、colorをrgbaやtransparentで指定できます。以下は同じp class="opa"のCSSを置き換える例で、colorは文字色を透過させ、背景や画像を一緒には透過させません。

CSSコード
.opa {
  margin: 0;
  padding: 0;
  font: 16.15px/1.9 sans-serif;
  color: rgba(0,0,0,0.3);
}
ブラウザ表示

こんにちは

rgba(◯,◯,◯,◯)の最後のα（アルファ値）で、その色の不透明度を指定します。rgbaの詳しい書き方はCSS Color 4のrgb()/rgba()仕様（W3C）を参照できます。

その他の要素にもopacityは使える

文字や画像だけでなく、divやspanなど様々な要素に対してopacityは使うことができます。使う機会はそう多くないかもしれませんが、押さえておくと表現の幅が広がるのではないかと思います。