CSS | テキストに合わせて画像を切り抜く方法
CSSだけで画像をテキストに合わせて切り抜く方法の紹介です。
この記事では、テキストの文字色を透過して「background-clip」で「text」を指定する方法と「mix-blend-mode」で「screen」を指定して画像を切り抜く2タイプの実装方法を紹介しています。
background-clipを利用する方法
See the Pen CSS Text Mask 01 by yochans (@yochans) on CodePen.
HTMLはコンテンツのボックスとなる部分を「.container{}」、テキスト部分を「.text{}」としています。
<div class="container">
<p class="text">ONE NOTES</p>
</div>「background-clip」を利用して画像テキストで切り抜くには、テキスト部分に以下の実装が最低限必要となっています。
- 「color」を「transparent」で透過色にする
- 「background-image」で画像ファイルを取得する
- 「background-clip」で「text」を指定する
- 「background-clip」はベンダープレフィックスが必要（Chrome系ブラウザ、Safari用）
.container{
}
.text {
padding: 10px;
margin: 0;
font-size: 100px;
font-weight: bold;
text-align: center;
color: transparent;
background-image: url(https://1-notes.com/wp-content/uploads/2020/09/sofa.jpg);
background-repeat: no-repeat;
background-size: cover;
background-clip: text;
-webkit-background-clip: text;
}mix-blend-modeを利用する方法
CSS3のmix-blend-modeを利用してテキストの切り抜き効果を得られる方法もあります。
mix-blend-modeは重なり合う要素との差分を表示できるので、画像は親要素に配置するということができます。
See the Pen CSS Text Mask (mix-blend-mode) by yochans (@yochans) on CodePen.
HTMLはコンテンツのコンテナとなる部分を「.container{}」、テキスト部分を「.text{}」としています。
<div class="container">
<p class="text">ONE NOTES</p>
</div>「background-clip」を利用して画像テキストで切り抜くには、以下の実装が最低限必要となっています。
- コンテナ「background-image」で画像ファイルを取得する
- テキスト「background-color」にて背景色を指定する（黒はダメ？）
- テキスト「mix-blend-mode」で「screen」を指定する
「mix-blend-mode」で「screen」を指定した場合、切り抜きを表現するにはテキストの背景色に白色（#FFF、rgbで255 255 255）の指定が必要で、指定しないとテキスト部分は透明な要素になってしまいます。
.container{
background-image: url(https://1-notes.com/wp-content/uploads/2020/09/sofa.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.text {
padding: 10px;
margin: 0;
font-size: 100px;
font-weight: bold;
text-align: center;
background-color: #FFF;
mix-blend-mode: screen;
}「mix-blend-mode」を利用した場合、テキストの周りを背景色で埋めているので、実際に実装する際にテキストの位置指定で少し厄介な部分もあります。
左寄せや中央表示だけならtext-alignとpadding指定で調節、またはdisplayのflexで指定。
細かい位置指定や複数の要素を内包する場合はコンテナを親positionを使った方が楽になると考えています。