HTML CSS 【初心者向け】画像の透過方法

2025年3月19日

画像の透過（透明にする）方法を初心者向けに解説！
画像の透過には「画像の一部を透過する方法」と「全体を透過する方法」の2種類があります。
目的に応じてCSSや画像編集ツール（Photoshopなど）を使い分けましょう！

CSSを使って画像全体を透過する

画像全体の透明度を調整するには、opacity や rgba を使います。

⒈ opacity で透明度を設定

//css

img {
  opacity: 0.5;  /* 透明度50% */
}

・ opacity: 1; （不透明）～ opacity: 0; （完全に透明）
・画像全体が透明になる（背景も含めて）

⒉ rgba( ) を使って背景を透過

background-color に rgba を使うと、背景色だけを透過できます。

//css

div {
  background-color: rgba(0, 0, 255, 0.5); /* 青色 + 50%の透明度 */
}

・画像ではなく、背景色だけを半透明にしたい場合に便利！

⒊ mix-blend-model で背景と合成

//css

img {
  mix-blend-mode: multiply;
}

・背景と自然になじませる効果
・ multiply , screen , overlay など試してみよう！

画像の一部だけを透過する（背景を透過）

画像の一部を透過する場合は、PNG画像（透過対応）やCSSマスクを使います。

⒈透過PNGを作成して使う
背景を透明にしたPNG画像を使うと、背景が透過されます。
（PNG形式は透過可能、JPEGは透過できない！）
画像編集ツール（例：Photoshop）で透明にする方法
⒈背景を削除（消しゴムツールや選択ツールを使う）
⒉PNG形式で保存

⒉ CSS の mask-image を使う（部分透過）
mask-image を使うと画像の一部だけを透過できます！

//css

img {
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}

・画像の下半分が徐々に透明になる！
・-webkit-mask-image も指定すると、Safariでも動く！

⒊ clip-path で一部を切り取る
画像の一部を切り抜いて、透明に見せることもできます。

//css

img {
  clip-path: circle(50%);
}

・画像を丸く切り取る！
・完全に消えるわけではないが、部分的に透過っぽくできる！

背景をぼかして透過（ガラス風エフェクト）

backdrop-filter を使うと、背景をぼかして透過できます。

//css

div {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
}

・ガラスのような透明効果（背景がぼやける）
・モダンなデザインによく使われる！

まとめ

方式	説明
opacity	画像全体を透明にする（背景ごと）
rgba( )	背景色だけを透明にする
mix-blend-model	背景と画像を合成する
PNG画像を使う	画像の一部を透明にできる
mask-image	画像の一部をフェードアウトする
clip-path	画像を特定の形に切り抜く
backdrop-filter	背景をぼかして透過