KAKERU Designing トミー（末富将也）

画像の上に色を重ねるCSS｜mix-blend-modeで1色に染める・ダブルトーン・白い背景を消す、コピペ4種類と使いどころ

画像の上に色を重ねるCSS。1色に染める・ダブルトーン・白い背景を消す見本とコード

写真の上に色を重ねて、全体を1色に染めたり、2色だけで表したり。画像編集ソフトで作ることが多い表現ですが、CSSの mix-blend-mode を使うと、元の写真はそのままで色だけをかぶせられます。色を変えたいときも、CSSの1行で済みます。

使いどころは、写真の色味がばらばらな一覧をそろえたいときや、特集の入口を印象的に見せたいときです。商品の色を正しく見せたい写真や、中身を読み取ってほしい図や画面の画像には使いません。

この記事の要点

  • mix-blend-mode を使うと、写真の上に重ねた色の板と写真を混ぜて、1色に染める・2色で表す・白い背景を消す、といった見せ方ができる
  • 使いどころは、色味のそろわない写真の一覧や特集の入口。商品の色を正しく見せたい写真や、中身を読ませる図には使わない
  • 混ざる相手は「同じ重なりのまとまり」の中だけ。途中の箱に transform などがあると効かなくなる。強制カラーモードでは写真がつぶれないよう、混ぜる指定を外す
トミー

連載「WEBの技術」の45回目です。
今回は写真に色を重ねる話。混ぜる相手の決まりさえ分かれば、難しくありません。

完成見本：写真に色を重ねる4種類

1〜3は、写真に色を混ぜただけの見本です。4は、元の写真との行き来が自動でくり返されます。見本の画像は写真の代わりのイラストです。

COLOR1. 写真を1色に染める一覧の写真の色味をそろえたいとき
MULTIPLY ＋ LIGHTEN2. ダブルトーンヒーロー画像や特集の入口を印象的に
MULTIPLY ON COLOR3. 白い背景を消す白背景の商品写真やイラストを色の上に置く
HOVER ＋ OPACITY4. 乗せると元の写真に写真つきカードのリンクに

※ 見本は読み上げソフトでは読まれないようにしています。4の見本はマウスの代わりに自動で切りかえていて、コピペ用のコードはマウスとキーボードで動きます。動きを減らす設定の環境では、見本は切りかわりません。

コピペ用のコード

CSSは、サイトのCSSファイルや、WordPressならテーマの「追加CSS」などに入れます。クラス名の頭の kd-bl は、サイトのほかのデザインと名前がぶつからないようにするための目印です。

1. 写真を1色に染める

写真の上に色の板を置き、mix-blend-mode: color で混ぜます。色味は上の板から、明るさは下の写真から取る指定で、写真の明るいところと暗いところはそのまま、全体が1色に染まります。

HTML
<div class="kd-bl-tint">
  <img src="画像のURL" alt="画像の内容" width="1200" height="800">
</div>
CSS
.kd-bl-tint {
  position: relative;
  /* 混ぜる範囲を、この箱の中だけにする */
  isolation: isolate;
  overflow: hidden;
}
.kd-bl-tint img {
  display: block;
  width: 100%;
  height: auto;
}
.kd-bl-tint::after {
  /* 写真にぴったり重なる色の板 */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #0284C7;
  /* 色味は板から、明るさは下の写真から取る */
  mix-blend-mode: color;
}
/* 強制カラーモードでは色の板が決まった色になるので、板を消す */
@media (forced-colors: active) {
  .kd-bl-tint::after {
    display: none;
  }
}

2. ダブルトーン

写真全体を2色だけで表す「ダブルトーン」です。写真を白黒にして背景の色とかけ合わせると、白いところが明るい色になります。さらに暗い色の板を lighten（明るいほうの色を残す指定）で重ねると、黒いところが暗い色に置きかわります。

HTML
<div class="kd-bl-duo">
  <img src="画像のURL" alt="画像の内容" width="1200" height="800">
</div>
CSS
.kd-bl-duo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* 写真の明るいところの色 */
  background: #7DD3FC;
}
.kd-bl-duo img {
  display: block;
  width: 100%;
  height: auto;
  /* 白黒にしてから、背景の色とかけ合わせる */
  filter: grayscale(1);
  mix-blend-mode: multiply;
}
.kd-bl-duo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* 写真の暗いところの色 */
  background: #312E81;
  mix-blend-mode: lighten;
}
@media (forced-colors: active) {
  .kd-bl-duo img {
    filter: none;
    mix-blend-mode: normal;
  }
  .kd-bl-duo::after {
    display: none;
  }
}

3. 白い背景を消す

切り抜いていない白背景の画像でも、色のついた箱の上で multiply をかけると、白いところが背景の色に変わり、四角い白が消えて見えます。ここでは色の板を使わず、画像そのものに指定します。

HTML
<div class="kd-bl-plate">
  <img src="画像のURL" alt="画像の内容" width="1200" height="800">
</div>
CSS
.kd-bl-plate {
  /* 混ぜる相手になる背景色は、画像のすぐ外の箱に付ける */
  isolation: isolate;
  padding: 16px;
  background: #BAE6FD;
}
.kd-bl-plate img {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  margin: 0 auto;
  /* 白いところが背景の色になる */
  mix-blend-mode: multiply;
}
@media (forced-colors: active) {
  .kd-bl-plate img {
    mix-blend-mode: normal;
  }
}

4. 乗せると元の写真に

ふだんは色をかけておき、マウスを乗せたときとキーボードで選んだときに板を消します。mix-blend-mode の値そのものは少しずつ変えられないので、opacity（不透明度）で板を消しています。

HTML
<a class="kd-bl-card" href="リンク先のURL">
  <img src="画像のURL" alt="画像の内容" width="1200" height="800">
</a>
CSS
.kd-bl-card {
  position: relative;
  display: block;
  isolation: isolate;
  overflow: hidden;
}
.kd-bl-card img {
  display: block;
  width: 100%;
  height: auto;
}
.kd-bl-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #0284C7;
  mix-blend-mode: color;
}
/* 乗せたとき・キーボードで選んだときは、元の写真に戻す */
.kd-bl-card:hover::after,
.kd-bl-card:focus-visible::after {
  opacity: 0;
}
.kd-bl-card:focus-visible {
  outline: 3px solid #0284C7;
  outline-offset: 3px;
}
/* ゆっくり変えるのは、動きを減らす設定をしていない人だけ */
@media (prefers-reduced-motion: no-preference) {
  .kd-bl-card::after {
    transition: opacity .3s;
  }
}
@media (forced-colors: active) {
  .kd-bl-card::after {
    display: none;
  }
}

仕組み：混ぜる相手は「後ろにあるもの」

上の色と下の色から、新しい色を計算する

mix-blend-mode は、要素の色と、その後ろにある色を計算で混ぜる指定です。ふつうの重なりでは上の色がそのまま見えますが、この指定があると、混ぜ方に応じた新しい色になります。半透明にして重ねるのとは別の仕組みなので、写真の明るいところと暗いところの差が残ります。

色の板は ::after で作る

1と2と4の板は、::after（要素のあとに足す飾り）で作っています。HTMLには画像を1枚書くだけで済み、板はCSSの中で完結します。inset: 0 は「上下左右の端までぴったり広げる」という意味です。<img> には ::after を付けられないので、外側の箱に付けます。

isolation で混ぜる範囲を箱の中に閉じる

isolation: isolate は、その箱を1つの「重なりのまとまり」にする指定です。MDNによると、mix-blend-mode が混ざる相手は、同じまとまりの中で後ろにあるものだけです。箱に isolation: isolate を付けておくと、ページの背景や後ろの要素まで混ざることがなくなります。

見本3はこの決まりの落とし穴が分かりやすい例です。背景色は画像のすぐ外の箱に付けます。外の箱に背景色があっても、途中の箱に transform や opacity、filter が付いていると、そこが別のまとまりになり、背景色と混ざらなくなります。右の見本は途中の箱に transform を付けたもので、白い四角が残っています。

multiply なし
multiply（見本）
途中の箱に transform

「手元では効いたのに、サイトに入れたら効かない」というときは、途中の箱のこうした指定を探します。テーマやスライダーが付けていることもあります。

ダブルトーンは、2段階で色を置きかえる

見本2は3つの段階でできています。

  • grayscale(1) で写真を白黒にする
  • 背景の水色と multiply でかけ合わせる。白いところが水色になり、黒いところは黒のまま残る
  • 紺の板を lighten で重ねる。紺より暗いところが紺に置きかわり、黒が紺になる

これで、写真の暗いところが紺、明るいところが水色の2色になります。背景と板の2か所の色を変えるだけで、別の組み合わせを作れます。

1つの要素で済ませる background-blend-mode

画像が飾りで、CSSの背景として置けるなら、background-blend-mode も使えます。同じ要素の背景画像と背景色を混ぜる指定で、板のための ::after が要りません。

CSS
.kd-bl-bg {
  min-height: 200px;
  /* 画像と色を、同じ要素の背景に重ねる */
  background: url("画像のURL") center / cover, #0284C7;
  background-blend-mode: luminosity;
}
@media (forced-colors: active) {
  .kd-bl-bg {
    background-blend-mode: normal;
  }
}

背景では画像が上、色が下の順に重なります。見本1とは上下が逆なので、同じ「色味を色から、明るさを写真から」でも、指定する値は color ではなく luminosity になります。

luminosity
multiply
color

背景画像には alt（画像の内容を伝える文）を付けられません。内容を伝える写真なら、<img> に見本1の方法を使います。

数値を変えるとどうなるか

混ぜ方（1）

半透明で重ねる
color（見本）
multiply
screen
overlay
luminosity

半透明で重ねると、全体がうっすら濁り、白いところも白く残りません。color は写真の明暗を保ったまま染まります。multiply は全体が暗くなり、元の写真の色も残ります。screen は全体が明るくなり、overlay は明るいところと暗いところの差が強くなります。luminosity は明るさを板から取るので、写真の明暗が失われ、中身が読み取りにくくなります。

板の色（1）

#0284C7（見本）
#7C3AED
#15803D

color なら、板の色を変えるだけで写真の色味が入れかわります。サイトの色に合わせやすい指定です。

ダブルトーンの色の組み合わせ（2）

紺と水色（見本）
えんじとオレンジ
深緑と薄緑

明るい色と暗い色の明るさの差が大きいほど、絵の形がはっきりします。差が小さいと、全体がぼんやりして何の写真か分かりにくくなります。

スマホと、見る人への配慮

強制カラーモードでは、混ぜる指定を外す

Windowsの設定などで画面の色を決まった配色に変える「強制カラーモード」では、MDNによると、background-color が決まった色に置きかわります。Chromeの再現（黒い配色）で確かめると、対策なしでは multiply や lighten と合わさって、写真が真っ黒や灰色になることがありました。このため、コピペ用のコードでは @media (forced-colors: active) の中で板を消し、混ぜる指定を外して、元の写真が見えるようにしています。

写真の上の文字は、一番明るいところで確かめる

色を重ねた写真の上に文字を置くと、場所によって文字と背景の明るさの差が変わります。color は写真の明るさを変えないので、白い文字を読みやすくする効果はありません。文字を読ませたいときは、画像の上の文字を読みやすくするCSSの方法を組み合わせます。

スマホには「乗せる」操作がない

見本4はマウスを乗せたときの変化なので、タッチ操作では基本的に色がかかったまま見られます。元の写真を見ないと困る内容なら、この見せ方は使いません。カードの中の文字だけで内容が分かるようにしておきます。

動きを減らす設定

見本4の変化は opacity の切りかえで、ゆっくり変える指定は prefers-reduced-motion: no-preference（動きを減らす設定をしていない）の中に入れました。設定をしている人には、すぐ切りかわります。

対応ブラウザとSVG

MDNでは mix-blend-mode も background-blend-mode も Baseline の Widely available で、2020年1月から主なブラウザで使えます。ただし、SVG（線や形を数字で描く画像）の中の要素に mix-blend-mode を指定する使い方は、MDNの対応表で Safari が未対応になっています。なお、混ぜる指定が効かない環境があると、色の板がそのまま写真を隠します。写真が見えなくなると困る場所では、板を薄い半透明にしておく方法もあります。

やりすぎ注意

ページの写真すべてに色をかけると、どれも同じに見えて区別が付きにくくなります。色をかけるのは一覧や入口など、目的のある場所にしぼります。

トミー

色をかける前に、その写真で伝えたいことを考えます。
料理のおいしさや商品の色が大事な写真は、そのまま見せるほうが伝わります。

AIに頼むなら

Claudeなどの生成AIに頼むと、こうしたコードはすぐ作ってもらえます。そのときは、色だけでなく、画像の役割と配慮まで伝えると、そのまま使いやすいコードになります。

記事カードの写真を、サイトの色 #0284C7 で1色に染めて。明るさは写真のままにして。
画像は img のままで alt を残し、板は ::after で作り、isolation で混ぜる範囲を閉じて。
マウスを乗せたときとキーボードで選んだときに元の写真に戻し、強制カラーモードでは板を消して。

AIが出したコードは、そのまま使う前に、次の3つを確かめます。

  • サイトに入れても色が混ざっているか。単体のページで効いても、テーマの箱に transform などがあると効きません。実際のページで見ます
  • 写真の中身が読み取れるか。色が濃すぎたり、明暗が失われる混ぜ方になっていたりしないか。一覧の全部の写真で見ます
  • 強制カラーモードで写真が消えないか。Chromeの開発者ツールの再現機能で確かめられます。黒い配色で見るのがおすすめです

KAKERUならこう使う／使わない

最後に、作り手としての判断です。

使う場面

  • 撮った人も時期もばらばらな写真の一覧。新しく撮り直さなくても、色味をそろえるとページ全体がまとまって見えます
  • 特集やキャンペーンの入口の大きな画像。色を変えるだけで季節に合わせられるので、画像を作り直さずに済みます
  • 白背景の商品写真を、色のついた帯の上に少しだけ置くとき。切り抜きの手間を省けます。ただし数が多いなら、切り抜いた画像を用意します

使わない場面

  • 商品の色が判断材料になる写真。色ちがいを選ぶページなどで色をかけると、実物と違う色を伝えることになります
  • 図やグラフ、画面の説明画像。色分けに意味がある画像は、色をかけると意味が読み取れなくなります
  • 白い商品や白い部分のある商品の白背景消し。multiply は背景の白と商品の白を区別できず、商品まで背景の色に染まります
トミー

KAKERUなら、まず「この写真は色を変えても意味が変わらないか」を考えます。
変わらないなら色をかけて、変わるなら元の写真をきれいに見せる工夫に切りかえます。

まとめ

  • mix-blend-mode は、要素の色と後ろの色を計算で混ぜる指定。半透明の重ねとは別の仕組みで、写真の明暗が残る
  • 明暗を残して1色に染めるなら color。ダブルトーンは、白黒＋multiply＋lighten の3段階
  • 混ざる相手は同じ重なりのまとまりの中だけ。isolation: isolate で閉じる。途中の箱の transform などに注意する
  • 飾りの画像なら background-blend-mode で1つの要素で済む。内容のある写真は img のまま alt を残す
  • 強制カラーモードでは板を消して元の写真を見せる。商品の色を伝える写真や、意味のある図には使わない

まずは1のコードをコピーして、板の色を自分のサイトの色に変えてみてください。写真の雰囲気が変わるのがすぐ分かります。

参考にした資料

いずれも2026年11月6日に確認しました。ブラウザの対応状況は変わることがあります。最新の情報は各ページでご確認ください。

ふだんの制作の話や、作ったものの裏側は Instagram と X でも出しています。

関連記事

画像の上の文字を読みやすくするCSSの重ね方 コピペで使える5種類と、写真が替わっても読める濃さ
関連記事画像の上の文字を読みやすくするCSS｜コピペで使える5種類と、写真が替わっても読める濃さ
画像に乗せるとズームする動きをCSSだけで コピペで使える5種類と、まわりを崩さない書き方
関連記事画像に乗せるとズームする動きをCSSだけで｜コピペで使える5種類と、まわりを崩さない書き方
CSSで画像を白黒反転させたい
関連記事【filter】CSSでhover時に画像を白黒反転させる
写真をずらして重ねるCSS。2枚をずらす・散らす・文字の箱・丸い写真の見本とコード
関連記事写真をずらして重ねるCSS｜グリッドの同じマスで重ねる、散らす・文字の箱・丸い写真、コピペ4種類と使いどころ

次に読む

無料の道具（登録なし）KAKERU TOOLS｜仕事の「ちょっと面倒」を、道具で減らす。WEB技術・次の回番号付きリストの飾りをCSSで｜丸数字・ステップ・POINT 01のコピペ4種類と、番号を消すときの注意WEB技術・前の回角丸の組み合わせで作る形｜border-radiusで葉っぱ・しずく・札・ふんわりした形、コピペ4種類と使いどころ
画像の上に色を重ねるCSS。1色に染める・ダブルトーン・白い背景を消す見本とコード

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

25歳からWEBの世界に携わり、WEBデザインから始めて、今はWEBシステムまで一貫して制作しています。問題点を洗い出し、改善を提案する中で、WEB・グラフィック・動画・システムを縦断して提案するのが得意です。

NEW POSTこのライターの最新記事