文字を画像で塗るCSS｜写真・しま模様・流れる景色・切り抜きのコピペ4種類と、読めなくならない注意点

文字の中に写真や模様が入った見出しは、画像を作らなくてもCSSで作れます。文字はふつうのテキストのままなので、あとから言葉を変えるのも、検索や読み上げに届くのもそのままです。

使いどころは、ページに1か所の大きな見出しです。文字が太く大きいときだけ画像が見えて、読めます。本文や小さな文字、意味を伝える大事な文には使いません。

この記事の要点

background-clip: text で、写真・しま模様・動く景色を文字の形に切り取って塗れる。mix-blend-mode で帯から文字を切り抜いたようにも見せられる
使いどころはページに1か所の太く大きな見出し。小さな文字や本文、大事な説明の文には使わない
画像が読み込めないときのために予備の色を書き、文字と背景の明るさの差（コントラスト）を確かめる

連載「WEBの技術」の48回目です。
4回目のグラデーションの文字の、写真版です。今回は「切り抜き」の形も足しました。

この記事の内容は、無料の道具でも試せます

clip-path メーカー

点を動かすだけで、写真を好きな形に切り抜くCSSが出る（登録なし）

道具で試してみる →

完成見本：文字を画像で塗る4種類

どれも中身はふつうの文字です。3は、文字の中の景色がゆっくり横へ流れています。

山と湖

BACKGROUND-CLIP1. 写真で塗る見出しを1か所だけ印象づけたいとき

SALE

REPEATING GRADIENT2. しま模様で塗る画像を用意せずに、文字に手ざわりを出したいとき

夏の海

ANIMATION3. 文字の中で景色が流れるトップページの大きな見出しに、ひとつだけ

山と湖

MIX-BLEND-MODE4. 帯から文字を切り抜く写真の上に、ブランド名やキャッチを大きく乗せるとき

コピペ用のコード

CSSは、サイトのCSSファイルや、WordPressならテーマの「追加CSS」などに入れます。クラス名の頭の kd-tf は、サイトのほかのデザインと名前がぶつからないようにするための目印です。画像のURLは、自分のサイトの画像に置きかえてください。

1. 写真で塗る

いちばん基本の形です。背景に写真を置き、background-clip: text（背景を文字の形で切り取る指定）で文字の外を消して、文字の色を透明にします。先頭に色を書いておくと、画像が読み込めなかったときもその色の文字で読めます。

山と湖

HTML

<p class="kd-tf-photo">山と湖</p>

CSS

.kd-tf-photo {
  margin: 0;
  font-size: 4rem;
  font-weight: 900;
  line-height: 1.2;
  /* 画像で塗れないブラウザでは、この色の文字になる */
  color: #0369A1;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .kd-tf-photo {
    /* 先頭の色は、画像が読み込めなかったときの文字の色 */
    background: #0369A1 url("https://www.kakeru-d.jp/wp-content/uploads/2026/10/css-image-hover-zoom-mountain.jpg") center 62% / cover;
    /* 背景を文字の形で切り取る。古いブラウザ用に -webkit- 付きも書く */
    -webkit-background-clip: text;
    background-clip: text;
    /* 文字の色を透明にして、下の画像を見せる */
    color: transparent;
  }
}

2. しま模様で塗る

塗るものは写真でなくてもかまいません。repeating-linear-gradient（しまをくり返す指定）で、2色の斜めのしま模様を作って塗っています。画像ファイルが要らないので、読み込みを待たずに表示されます。

SALE

HTML

<p class="kd-tf-pattern">SALE</p>

CSS

.kd-tf-pattern {
  margin: 0;
  font-size: 4rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .04em;
  color: #0369A1;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .kd-tf-pattern {
    /* 2色の斜めのしま模様。6pxごとに色を切りかえる */
    background: repeating-linear-gradient(-45deg, #0369A1 0 6px, #0C4A6E 6px 12px);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

3. 文字の中で景色が流れる

1の写真を横に大きく広げ（260% auto）、background-position（画像の位置）を左はしから右はしへゆっくり動かしています。文字は止まったまま、中の景色だけが流れます。動きを減らす設定の人には止めて見せます。

夏の海

HTML

<p class="kd-tf-move">夏の海</p>

CSS

.kd-tf-move {
  margin: 0;
  font-size: 4rem;
  font-weight: 900;
  line-height: 1.2;
  color: #0369A1;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .kd-tf-move {
    background: #0369A1 url("https://www.kakeru-d.jp/wp-content/uploads/2026/10/css-image-hover-zoom-sea.jpg") 0% 78% / 260% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* 画像の位置を、左はしから右はしへゆっくり動かす */
    animation: kd-tf-flow 9s ease-in-out infinite alternate;
  }
}
@keyframes kd-tf-flow {
  to { background-position: 100% 78%; }
}
/* 動きを減らす設定の人には、止めて見せる */
@media (prefers-reduced-motion: reduce) {
  .kd-tf-move { animation: none; }
}

4. 帯から文字を切り抜く

写真の上に紺の帯を重ね、帯の文字だけ写真が見えるようにした形です。mix-blend-mode: multiply（下の色とかけ合わせる指定）では、白は下の色をそのまま見せ、濃い色は下を暗くします。そのため白い文字の部分だけ写真がそのまま出て、文字の形に切り抜いたように見えます。

山と湖

HTML

<div class="kd-tf-knock">
  <p>山と湖</p>
</div>

CSS

.kd-tf-knock {
  display: flex;
  align-items: center;
  min-height: 220px;
  background: url("https://www.kakeru-d.jp/wp-content/uploads/2026/10/css-image-hover-zoom-mountain.jpg") center / cover;
}
.kd-tf-knock p {
  width: 100%;
  margin: 0;
  padding: .1em 0;
  background: #10283A;
  color: #FFFFFF;
  font-size: 4rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  /* かけ合わせ：白い文字は下の写真がそのまま見え、紺の帯は写真を暗くする */
  mix-blend-mode: multiply;
}
/* 強制カラーモードでは、混ぜずにふつうの帯と文字にする */
@media (forced-colors: active) {
  .kd-tf-knock p { mix-blend-mode: normal; }
}

仕組み：背景を文字の形で切り取る

ふつうは箱いっぱいに出る背景を、文字の形だけ残す

背景の画像は、ふつうは要素の箱いっぱいに広がります。background-clip は、背景をどこまで出すかを決める指定で、text を選ぶと文字の形の中だけに背景が残ります。ただし、そのままだと文字の色が上に重なって画像が隠れるので、color: transparent（透明）にして画像を見せます。

指定	していること
`background`	文字の後ろに写真やしま模様を置く
`background-clip: text`	背景を文字の形で切り取る
`color: transparent`	文字の色を透明にして、下の背景を見せる

background はまとめて書く指定なので、あとに書くと background-clip まで初期値に戻ります。background-clip は必ず background より下に書きます。

-webkit- 付きも書く理由

MDNの対応表では、接頭辞（-webkit- などの頭の目印）なしの background-clip: text が使えるのは、Chrome と Edge が120から、Safari が14からです。それより前のブラウザは -webkit-background-clip だけに対応していました。両方書いておくと、どちらでも効きます。

@supports で「対応しているときだけ」透明にする

もし文字の形で切り取れないブラウザで文字だけ透明になると、文字が消えてしまいます。そこで @supports（ブラウザが対応しているときだけ中を使う書き方）で囲み、外側には color: #0369A1 を書いています。対応していないブラウザでは、ふつうの青い文字になります。

切り抜きは、色のかけ合わせ

4は background-clip を使っていません。mix-blend-mode: multiply は、下の色と上の色をかけ合わせる指定です。白をかけても下の色は変わらず、濃い色をかけると下が暗くなります。その結果、白い文字の部分だけ写真がそのまま見え、紺の帯の部分は写真が暗く沈みます。

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

文字の太さ（1）

山と湖

font-weight: 400

山と湖

700

山と湖

900（見本）

細い文字では、線の中に入る画像の面積が小さく、何の写真か分からなくなります。見本は font-weight: 900（いちばん太い）にしています。使うフォントに太い太さがあるかも確かめます。

画像のどこを使うか（3）

夏の海

上のほう（8%）：夕焼けの空

夏の海

まん中（45%）：太陽と空

夏の海

下のほう（95%）：深い海

同じ画像でも、background-position の縦の位置で見え方が大きく変わります。上のほうの夕焼けの空は、白っぽい台の上では明るさの差がたりず、読みにくくなります。見本は78%の位置で、海の部分を使っています。

画像が読み込めなかったとき（1）

山と湖

予備の色なし：何も見えない

山と湖

予備の色 #0369A1 あり（見本）

左は、存在しない画像を指定して、予備の色を書かなかった例です。背景が何もないので、文字が透明のまま消えています。右のように background の先頭に色を書いておくと、その色が文字の形に切り取られて、読める状態が残ります。MDNも、この予備の色を付けるように案内しています。

しまの幅と色（2）

SALE

しま 3px：細かすぎて色が混ざる

SALE

しま 6px（見本）

SALE

薄い水色と組む：文字が欠けて見える

しまが細すぎると2色が混ざって1色に見え、模様の意味がなくなります。また、2色のうち片方が薄いと、その部分が背景にとけて、文字が欠けているように見えます。2色とも、白に対して十分に濃い色を選びます。

帯の色と、混ぜない場合（4）

山と湖

帯を黒に

山と湖

帯を濃い青に

山と湖

混ぜない（normal）：ただの帯と白い文字

帯の色を変えると、写真の暗さが変わります。mix-blend-mode を外すと、ただの帯と白い文字になり、写真は文字の中に見えません。

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

明るさの差を、いちばん明るいところで確かめる

写真で塗った文字は、場所によって色が違います。WCAG（ウェブのアクセシビリティの国際的な基準）では、文字と背景の明るさの差は4.5:1以上、大きな文字は3:1以上が目安です。見本の画像の色を測ると、白に対して、山の緑は約5.1:1、海の青は約3.3〜6.4:1、空の水色は約1.6:1、夕焼けの空は約2.2:1でした。見本1も、文字の上のはしに空の水色が少し入っています。文字の大部分が3:1を下回らない位置を選び、明るい色が多い写真は、位置をずらすか別の写真にします。

文字の大きさは、スマホで決める

スマホでは見出しの文字が小さくなり、中の画像が見えにくくなります。スマホ幅で見て、写真が分からないほど小さくなるなら、スマホだけふつうの色の文字に戻すのも手です。

流れる景色は、止められるように

3の動きは、prefers-reduced-motion（端末で「動きを減らす」を選んでいるか）で止めています。ゆっくりした動きでも、画面の大きな面積が動き続けると気になる人がいます。

強制カラーモードでは、ふつうの文字に戻る

Windowsの設定などで画面の色を決まった配色に変える「強制カラーモード」では、MDNによると color が決まった色に置きかわります。透明にした文字にも色が付くので、文字は読めます。4は、帯の色も置きかわってかけ合わせの結果が読めなくなるおそれがあるため、このモードでは混ぜない指定を入れています。

読み上げ・コピー・翻訳はそのまま

文字はHTMLのテキストなので、読み上げ・コピー・翻訳はふつうの見出しと同じです。文字を画像にして貼るより、ここがいちばんの利点です。

やりすぎ注意

見出しのたびに写真の文字が出てくると、どれも目立たなくなり、読むのにも疲れます。1ページに1か所、多くても大見出しだけにします。

写真の文字は「読ませる」より「印象を残す」ための表現です。
読ませたい文は、ふつうの色の文字で書きます。

WordPressで使うとき

見出しブロックやカスタムHTMLブロックで、「高度な設定」の追加CSSクラスにクラス名を入れると使えます。テーマによっては見出しに背景色や下線の飾りが付いていて、それも一緒に文字の形に切り取られることがあります。思った形にならないときは、開発者ツールで background に当たっている指定を確かめます。

写真はメディアライブラリに入れ、そのURLを url() に書きます。見出しの大きさに合う、横長で軽めの画像を選ぶと読み込みも速くなります。

AIに頼むなら

Claudeなどの生成AIに頼むときは、見た目だけでなく、予備の色や配慮まで伝えると、そのまま使いやすいコードになります。

ページの一番上の見出しを、写真で塗った文字にするCSSを書いて。
background-clip: text を -webkit- 付きと両方書き、@supports で対応しているときだけ文字を透明にして。
画像が読み込めないときの予備の色は #0369A1。文字は太さ900、スマホで小さくなりすぎないようにして。

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

予備の色があるか。画像のURLをわざと間違えて、文字が消えないかを見ます
background-clip が background より下にあるか。順番が逆だと、切り取りが効かず箱いっぱいに写真が出ます
スマホ幅での読みやすさ。文字が小さくなったとき、写真の明るい部分で文字が欠けて見えないかを見ます

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

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

使う場面

トップページやキャンペーンページの、いちばん大きな見出し。写真の世界観を見出しにも持ちこみたいときに、1か所だけ使います
写真の上にブランド名を大きく乗せるとき。白い文字を乗せるより写真が見え、4の切り抜きが合います
画像を作る手間を減らしたいとき。文字を画像にすると、言葉を直すたびに作り直しになりますが、CSSなら文字を書きかえるだけです

使わない場面

本文や小さな見出し。線が細くなり、写真も文字も分からなくなります
料金・日付・注意書きなど、正確に読ませたい文。読み間違いが起きないよう、ふつうの色の文字で書きます
明るい色の多い写真。白い台の上では文字が欠けて見えるので、別の写真を選ぶか、この表現をやめます

KAKERUなら、まず「写真を見せたいのか、言葉を読ませたいのか」を決めます。
写真を見せたいときだけ、この表現を1か所に使います。

まとめ

background ＋ background-clip: text ＋ color: transparent の3つで、文字を写真や模様で塗れる
-webkit-background-clip も一緒に書き、@supports で対応しているときだけ文字を透明にする
background の先頭に予備の色を書く。画像が読み込めなくても文字が消えない
切り抜きは mix-blend-mode: multiply。白い文字の部分だけ下の写真が見える
太く大きな見出しに1か所だけ。明るさの差を、写真のいちばん明るいところで確かめる

まずは1のコードをコピーして、自分のサイトの写真に置きかえてみてください。background-position の数字を変えると、文字の中に入る景色が変わるのが分かります。

参考にした資料

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

MDN「background-clip」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/background-clip
※text の値の意味。Accessibility の節：背景と文字のコントラストを確かめること、画像が読み込めないと読めなくなるので予備の background-color を付けること。対応表：接頭辞なしの text は Chrome・Edge 120、Safari 14 から。それより前は -webkit-background-clip だけ。Firefox は background-attachment: fixed などで効かない場合があるという注記
MDN「@supports」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@supports
※ブラウザが指定に対応しているときだけ中を使う書き方と、or のつなぎ方
MDN「repeating-linear-gradient()」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/gradient/repeating-linear-gradient
※しま模様をくり返す書き方
MDN「background-position」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/background-position
※%で書いた位置の意味（画像と箱の同じ位置を合わせる）
MDN「mix-blend-mode」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/mix-blend-mode
※multiply などの混ぜ方の種類
MDN「prefers-reduced-motion」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion
※動きを減らす設定の確かめ方
MDN「forced-colors」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/forced-colors
※強制カラーモードで color や background-color が決まった色に置きかわること
W3C「WCAG 2.2 達成基準 1.4.3 コントラスト（最低限）」（英語）
https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
※文字と背景の明るさの差は4.5:1以上、大きな文字は3:1以上