概要

CSSプロパティ｢opacity｣ は、要素の不透明度を指定することができます。値は0から1までの数値を指定することができ、それ以外の数値を指定してもこの中に収められます。

<div>
  <p class="opacity-1">この要素は不透明度1</p>
  <p class="opacity-5">この要素は不透明度0.5</p>
</div>
<style>
html,
body {
  height: 100%;
}
div {
  background: url('https://www-creators.com/wp-content/uploads/2017/11/cssp_sample_stripe.png') repeat 0 0;
  width: 100%;
  height: 100%;
}
p {
  padding: 10px;
  border: 1px solid #000;
  background-color: #fff;
  width: 200px;
}
.opacity-1 {
  opacity: 1;
}
.opacity-5 {
  opacity: 0.5;
}
</style>

値の指定方法

{ opacity: 数値 }

1を指定した場合、完全に不透明になります。そして0に近づけば近くほど要素が透明になり、0を指定すると完全に透明になります。

要素が非表示になるという点では、 CSSプロパティ visibility の｢hidden｣ を指定しても同じような表示を実現できるので、合わせて確認しておくとよいでしょう。

使用例

カーソルをあてた時に、透明度の変化をつけてみましょう。

<p>参加しますか？</p>
<a href="#" class="opacity">参加します</a>
<a href="#" class="opacity">参加しません</a>
<style>
a {
  padding: 10px;
  border: 1px solid #afeeee;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  background-color: #def;
}
.opacity:hover {
  opacity: 0.7;
}
</style>

仕様書

• CSS Color Module Level 3

関連CSSプロパティ

• opacity