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を指定すると、完全に透明になる。

<img src="portrait.webp" style="opacity: 0;">
<p style="opacity: 0%;">
  この要素の不透明度は0%です。
</p>

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

<img src="portrait.webp" style="opacity: .25;">
<p style="opacity: 25%;">
  この要素の不透明度は25%です。
</p>

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

<img src="portrait.webp" style="opacity: .5;">
<p style="opacity: 50%;">
  この要素の不透明度は50%です。
</p>

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

<img src="portrait.webp" style="opacity: .75;">
<p style="opacity: 75%;">
  この要素の不透明度は75%です。
</p>

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

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

<img src="portrait.webp" style="opacity: 1;">
<p style="opacity: 100%;">
  この要素の不透明度は100%です。
</p>

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

子要素

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

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

背景のみ透過

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

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

背景のみ透過させるには、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>

グラデーション

背景色の透明度が徐々に変わってくグラデーションにするには、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

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