CSS opacity

opacityは要素の不透明度を指定するCSSプロパティです。画像やテキストなどを半透明にすることができます。

書式

opacityプロパティには、要素の不透明度を0から1までの数値で指定する。0を指定すると完全に透明になり、1を指定すると完全に不透明になる。

opacity: 1.0;

要素の不透明度を0%から100%までのパーセンテージで指定することもできる。0%を指定すると完全に透明になり、100%を指定すると完全に不透明になる。

opacity: 100%;

親要素のopacityプロパティを継承するには、inheritを指定する。

opacity: inherit;

opacityプロパティの初期値は1である。

すべての要素にopacityプロパティを適用できる。

opacityに0.0を指定すると、完全に透明になる。

<figure>
  <img src="portrait.webp" style="opacity: 0;">
  <figcaption style="opacity: 0%;">図1 不透明度0%</figcaption>
</figure>

<figure>
  <img src="portrait.webp" style="opacity: .25;">
  <figcaption style="opacity: 25%;">図2 不透明度25%</figcaption>
</figure>

<figure>
  <img src="portrait.webp" style="opacity: .5;">
  <figcaption style="opacity: 50%;">図3 不透明度50%</figcaption>
</figure>

<figure>
  <img src="portrait.webp" style="opacity: .75;">
  <figcaption style="opacity: 75%;">図4 不透明度75%</figcaption>
</figure>

opacityに1.0を指定すると、完全に不透明になる。

<figure>
  <img src="portrait.webp" style="opacity: 1;">
  <figcaption style="opacity: 100%;">図5 不透明度100%</figcaption>
</figure>

opacityプロパティに指定した値は、子孫要素へ継承される。

<div style="opacity: 50%;">
  <p>この要素の不透明度は50%です。</p>
</div>

この要素の不透明度は50%です。

要素に対してopacityを指定すると、文字と背景の両方が透過される。

<div style="background-color: #00ff00; opacity: .25; padding: .5rem;">
  The quick brown fox jumps over the lazy dog.
</div>

The quick brown fox jumps over the lazy dog.

背景のみ透過させるには、opacityプロパティを指定するのではなく、background プロパティにrgba関数を指定する。

rgba関数の第4引数には不透明度を指定できる。不透明度は、opacityプロパティと同様に、0から1までの範囲で指定する。

<div style="background-color: rgba(0, 255, 0, .25); padding: .5rem;">
  The quick brown fox jumps over the lazy dog.
</div>

The quick brown fox jumps over the lazy dog.

背景色の透明度が徐々に変わってくグラデーションにするには、background プロパティにlinear-gradient関数を指定する。

<div style="background: liner-gradient(to bottom, rgba(0, 255, 0, .5), rgba(0, 255, 0, .25)); width: 250px; height: 250px;">
</div>

JavaScriptからはHTMLElementインタフェースのstyleプロパティからopacityプロパティへアクセスできる。

<img src="portrait.webp" id="example">
<script>
  document.getElementById("example").style.opacity = "0.5";
</script>

World Wide Web Consortium (2021) CSS Color Module Level 3