CSSだけで画像を文字の形に切り抜く方法

見出しなど、太い文字を大きく掲載するような場面では、画像を文字の形にくり抜いて表示したいというケースがありそうに思います。「画像をくり抜く」というか、「文字に画像のテクスチャを貼る」と表現しても良いかも知れませんが。例えば下図の表示例のようにです。

CSSの標準ではありませんが、IEを除く代表的なブラウザではすべて、任意の画像を切り抜くような形で自由な文字を表示できます。
Firefox、Chrome、Opera、Safariで表示可能です。IEではIE11でも表示できませんが、今のEdgeなら表示できます。上図はEdgeでの表示例です。
太い文字にテクスチャを貼ったみたいな感じで、画像が文字の形にくり抜かれていることが分かります。
画像化や画像の加工は一切不要でテキストのまま表示できるため、修正は容易ですし検索にもヒットしますしコピーも可能です。

このような画像の切り抜き方法は、特に難しくはありません。CSSをほんの数行書くだけです。
最低限必要なのは、

1. くり抜きたい画像を背景画像として指定し、
2. 画像の掲載範囲をテキストの部分に限定する指定を追加して、
3. 文字色を透過色にする

……という3点だけです。
その方法を以下に紹介します。

画像を文字の形に切り抜く準備（HTMLソース）

画像を文字の形にくり抜く際のHTMLソースには、何も特別な点はありません。
下記のように、単にCSSで装飾するためのclass名を付加しておくだけです。あとは、何でも好きな文字を書いて下さい。

<p class="cutout">★画像の切抜♪</p>

上記では、class名として「cutout」を指定しています。
次に、このclassに対してCSSで装飾を追加します。

画像を文字の形に切り抜くCSSソースの書き方

最低限必要なCSSソースは、以下の3行です。（実際に使う際には文字サイズなどの調整が必要でしょうが。その点は後述します。）

.cutout {
	background-image: url("cutout.jpg"); /* 切り抜きたい画像 */
	-webkit-background-clip: text;       /* 画像を文字で切り抜く指定 */
	color: transparent;                  /* 文字色を透明にする */
}

上記のCSSソース3行のポイントは下記の通りです。

• 2行目：
  まず、テキストで切り抜きたい画像を、background-imageプロパティを使って背景画像として指定します。後述の表示例では以下のような画像を用意しました。
  
• 3行目：
  次に、背景画像の描画領域を指定する background-clipプロパティを使って、背景画像が描かれる範囲を「テキスト(text)」に限定します。ただし、この指定はCSS標準ではないため、実際に記述する際には上記のようにベンダープレフィックスを付加して-webkit-background-clipと書く必要があります。なお、FirefoxやEdgeでも「-webkit-」で認識します。「-moz-」や「-ms-」は不要です。
• 4行目：
  最後に、文字色を透明にします。colorプロパティに値「transparent」を指定すれば透明になります。ここに色を塗ってしまうと、背後の画像が見えなくなるため意味がなくなってしまいますので注意して下さい。

実際に表示する際は、文字を太めにする方が見やすいでしょうし、文字間隔は詰めた方が画像がよく分かるでしょうから、以下のCSSも追加すると良いかもしれません。

.cutout {
	font-weight: bold;      /* 文字を太字に */
	font-size: 10em;        /* 文字を大きくする */
	letter-spacing: -0.1em; /* 文字間隔を詰める */
	line-height: 1;         /* 行間隔を詰める */
}

これ以降に掲載する表示例では、CSSに上記の4行も追加しています。

画像を文字の形に切り抜く表示例1

上記のHTML＋CSSソースを実際に表示させると、以下のように見えます。
Firefox、Chrome、Opera、Safari、Edgeでは、冒頭の図のように、画像が文字の形に切り抜かれて表示されているように見えるでしょう。

ただし、上記の書き方ではIEでは表示できません。しかも、文字も読めません。
それではやや都合が悪いので、IEでも何とかまともに表示されるようにする方法を下記に紹介しておきます。

CSSだけで画像を文字の形に切り抜く方法（IE対策編）

画像を文字の形に切り抜く方法として重要な、-webkit-background-clipプロパティが（-webkit-プレフィックスを付加しているので当然ですが）IEでは認識されないので、IEでは使えません。
先ほどのCSSソースだと、IEが認識できる部分だけを適用すると「文字が透明色になり、背景画像が表示される」というだけになってしまうため、単に背景画像が並んでいるだけにしか見えません（文字は透明なのでテキストが読めません）。
これではIEで閲覧された場合に困ります。

そこで、IEでは「画像を文字の形に切り抜く表現」そのものは実現はできないものの、せめて文字だけは問題なく読めるようなCSSの書き方を採用しておく方が望ましいでしょう。
下記の比較図(Edge15とIE11)をご参照下さい。IEでも文字は読めることが分かります。

※ここでは、IEで見える文字色を白色にしていますが、色は任意に指定できます。背景画像に合わせて見やすい色を指定しておけば良いでしょう。

画像を文字の形に切り抜くCSSソースの書き方（IE対策編）

先ほどのように表示するには、以下のようにCSSソースを書きます。

.cutout {
	background-image: url("cutout.jpg");  /* 切り抜きたい画像 */
	-webkit-background-clip: text;        /* 画像を文字で切り抜く指定 */
	color: white;                         /* 文字色を白色(不透明)にする：IE用 */
	-webkit-text-fill-color: transparent; /* 文字色を透明にする：IE避け */
	/* 以下は任意の装飾 */
	margin: 0;
	font-weight: bold;
	font-size: 10em;
	letter-spacing: -0.1em;
	line-height:1;
}

上記の4行目と5行目がIE対策です。

IEでは、もちろんcolorプロパティを使えば文字色を指定できます。しかし、-webkit-text-fill-colorを使って文字に色を塗る指定は認識されません。
上記のIE対策はこのことを利用しています。
上記のCSSソースの4～5行目は、

• IEでは、colorプロパティだけが認識されるので、文字は白色で表示される。
• Edge・Firefox・Chrome・Opera・Safariなどでは、colorプロパティで文字が白色になるものの、その直後の-webkit-text-fill-colorプロパティによって文字色が透明に上書きされるため、文字は透明になる。

……となります。

※colorプロパティに適当な色(不透明な色)を指定しておいた上で、-webkit-text-fill-colorプロパティを使ってテキストを透明にしているので、IEユーザが「背景しか見えなくなる」のを防げます。
IEでは、-webkit-background-clipを認識しないものの、同様に-webkit-text-fill-colorも認識しないので、文字色が透明にはなりません。
併せて、表示上問題のない文字色をcolorプロパティで指定しておけば、IEでは「背景画像の上に文字が載っている」状態で表示されるわけです。

画像を文字の形に切り抜く表示例2

上記のCSSソースを使って冒頭のHTMLを実際に表示させると、以下のように見えます。
Firefox、Chrome、Opera、Safari、Edgeでは画像が文字の形に切り抜かれて表示されているように見え、IEでは背景画像の上に文字が載っているように見えます。

以上、画像を文字の形にくり抜いて表示するHTML＋CSSソースの書き方でした。
ぜひ、使ってみて下さい。

備考：CSS標準の書き方ではない

なお、-webkit-background-clipも-webkit-text-fill-colorも、どちらも「-webkit-」のプレフィックスが付いていることからも分かるとおり、CSSの標準ではありません。そのため、上記の記述方法が今後もずっと使えるかどうかは分かりませんので注意して下さい。

※background-clipプロパティ自体はCSS標準ですが、値にtextを指定できる点はCSS標準ではありません。そのため、値にtextを指定するためには -webkit-プレフィックスを付けて-webkit-background-clipと記述します。

(更新日：2017年11月04日)