CSS 画像の透明度 / 透過

1. 画像の透明度 (Opacity)

CSS で画像の透明度を調整するには、opacity プロパティを使用します。

このプロパティの値は 0.0 から 1.0 の範囲で指定します。値が小さいほど透明度が高くなります（0.0 は完全に透明、1.0 は完全に不透明）。

img {
  opacity: 0.5;
}

1.1 透明度の異なる画像サンプル

以下は、それぞれ異なる opacity 値を適用した例です：

• 1.0（デフォルト）
• 0.5
• 0.2

img.opacity1 {
  opacity: 1.0;
}

img.opacity2 {
  opacity: 0.5;
}

img.opacity3 {
  opacity: 0.2;
}

2. 透明なホバーエフェクト (Transparent Hover Effect)

opacity プロパティは、多くの場合、ユーザーが画像の上にマウスを置いた（ホバーした）時のエフェクトとして使用されます。

img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}

仕組みの解説：
上記のコードでは、通常の状態で画像は 50% 透過（0.5）しています。ユーザーが画像の上にマウスを置くと、不透明度が 100%（1.0）に変化し、画像が鮮明に見えるようになります。

3. 透明なボックス (Transparent Box)

背景に透明度を適用する場合、opacity プロパティを使用すると、その要素のすべての子要素も同様に透明になってしまうという特性があります。これにより、ボックス内のテキストが読みにくくなることがあります。

div {
  opacity: 0.3;
}

4. RGBA を使用した透明度 (Transparency using RGBA)

前述の opacity プロパティによる子要素への影響を避けたい場合は、RGBA カラー値を使用します。RGBA を使用すると、背景色のみを透明にし、その中のテキストなどは不透明なまま維持することができます。

RGBA は「Red（赤）」「Green（緑）」「Blue（青）」「Alpha（アルファ）」の略です。アルファパラメータは 0.0（完全に透明）から 1.0（完全に不透明）の間の数値で指定します。

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

4.1 opacity と RGBA の比較

5. 透明なボックス内のテキスト (Text in Transparent Box)

画像などの背景の上に透明なボックスを配置し、その中にテキストを表示する際の実装例です。

<div class="background">
  <div class="transbox">
    <p>このテキストは透明なボックスの中に配置されています。</p>
  </div>
</div>

div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}

div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  /* opacity を使用する場合 */
  opacity: 0.6;
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}

この例では、.transbox クラスに opacity: 0.6 が適用されているため、ボックスの背景だけでなく、中の <p> 要素のテキストも 60% の不透明度になります。テキストを完全に不透明にしたい場合は、セクション 4 で説明した rgba() 形式で背景色を指定するのがベストプラクティスです。