コードラボJP
プライバシーポリシー お問い合わせ サイトマップ

CSS Opacity（透明度）

opacityプロパティは要素の透明度を指定します。

opacityプロパティは0.0から1.0の値を取ります。値が小さいほど透明になります：

img {
  opacity: 0.5;
}

opacityプロパティはよく:hoverセレクターと一緒に使用され、マウスオーバー時に透明度を変更します：

img:hover {
  opacity: 1.0;
}

マウスポインターが画像から離れると、画像は再び透明になります。

RGBAを使用した透明度

子要素に透明度を適用したくない場合は、RGBA色値を使用します。次の例では、背景色の透明度を設定し、テキストには透明度を適用しません：

100%の透明度

60%の透明度

30%の透明度

10%の透明度

CSSカラーの章で学んだように、色の値としてRGBを使用できます。RGBに加えて、アルファチャネル（RGBA）を使用することもできます。これは色の透明度を指定します。

アルファパラメータは0.0（完全に透明）から1.0（完全に不透明）の間の数値です。

div {
  background: rgba(76, 175, 80, 0.3); /* 30%の透明度の緑の背景 */
}

<html>
<head>
<style>
div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}

div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p class="hint">これは透明ボックスに配置されたテキストです。</p>
  </div>
</div>

</body>
</html>