今回はCSSのみで文字の形に画像を切り抜くテクニックをご紹介します。
ここでは記事のアイキャッチ画像に載せてるような切り抜きが3工程で簡単に実装可能です。
Photoshopなどでよく見る加工方法ですがjpgやpngなどで作成するとテキスト変更の時に再度画像を作らなくてはいけなくなったりするので、画像が重たすぎない場合などサーバーに負担がないレベルならcssで実装してしまうのは実装後の保守管理も楽になるのではないかと思っています。
それではいってみましょう！
全体の流れ
- 画像を配置
- テキストの形に切り抜いて
- テキストを非表示
流れとしてはこんな形になります。
なので、これからご紹介する方法ですが全部やらないと狙った形にならないので要注意です！
※確認しながら進めると思いますが一旦最後までやってみてください。
基本のHTML・cssはこちらです。
<p class="text">background-clip</p>.text {
font-size: 100px;
font-weight: bold;
}画像を配置
まずは画像を設置します。
.text {
background-image: url(~~~~.jpg);
}画像が設置出来ればOKなので
background: url(~~~~.jpg);というショートハンドの形でも問題ないです。
テキストの形に切り抜く
次に設置した画像をテキストの形で切り抜きます。
.text {
-webkit-background-clip: text;
}codepenでやってみるとベンダープレフィックスがないとうまく動かなかったです。
IEがいないから多分大丈夫だと思うのですが⋯
まぁつけとくと安心ってやつですね。
この時点で画像はテキストの形に切り抜かれているので一見何もなくなってしまいますが問題ありません。
次のステップにいきましょう！
テキストを非表示
最後にこのプロパティを入れて完成です。
.text {
color: transparent;
}「transparent」って透明にするやつですね。
そうです。
ここで元のテキストを透明にする事で、テキストの形に切り抜かれた画像だけが見えるようになる、という仕組みです。
結論
お時間がない方、すぐに解決したい方向けにここに全てをまとめたcssを書いておきます。
.text {
background-image: url(~~~~.jpg);
-webkit-background-clip: text;
color: transparent;
}こちらが完成形になります。
ややこしいようでやってる事はすごい簡単なんです。
ぜひ機会があればやってみてくださいね。
ではまた！
当記事で紹介、及び記載している内容は個人的考えに基づいております。
責任は負いかねますので、お試しの際は必ずバックアップを取った上で自己責任のもと実行してください。
