初心者向け｜画像を透過する方法まとめ【CSS・Photoshopで背景を透明にする】

「画像を透明にしたいけど、どうやってやるの？」と悩んでいませんか？
画像の透過には 「画像全体を透過する方法」と「一部だけ透過する方法」 の2種類があります。
本記事では、CSSを使った簡単な透過設定から、Photoshopで背景を削除してPNG画像を作成する方法まで、初心者でもわかるように解説します。ブログやWebデザインに役立つので、ぜひ活用してみましょう！

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

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

⒈ opacity で透明度を設定

See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.

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

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

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

See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.

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

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

See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.

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

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

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

⒈透過PNGを作成して使う

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

⒉ CSS の mask-image を使う（部分透過）

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

See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.

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

⒊ clip-path で一部を切り取る

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

See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.

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

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

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

See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.

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

まとめ

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

→ opacity だけでなく、状況に応じて mask-image やmix-blend-model を使うとより自由な表現が可能です！
ぜひ試してみましょう！

その他関連記事はこちら→プログラミング備忘録