![](https://takayamato.com/wp/wp-content/uploads/2019/09/428d289eac6b6868b3945494a46b0056-1024x435.png)
こんにちは。
日頃インプットしてイイなーっと思った小技を紹介していこうと思います。
今回は画像をテキストの形に合わせてクリッピング(切り抜く)方法を紹介したいと思います。この方法を使うことでテキスト内に背景画像を入れ込むことや、テキストの色をグラデーションで表現できる様になります。
下記画像のようなイメージです。
![](https://takayamato.com/wp/wp-content/uploads/2019/09/66d6b8b86254d8e7aeea8e8fd655b44a-1024x494.jpg)
こんな感じです。
では説明していきます。
まずテキストを用意します。
<section class="section">
<div class="inner">
<p class="coloredText">colored text.</p>
</div>
</section>
そしてベースとなるCSS(SCSS)はこちらです。
.section{
margin: 350px auto;
.inner{
width: 1200px;
margin: 0 auto;
.coloredText{
font-size: 60px;
margin: 0 auto;
color: #fff;
}
}
}
次に背景画像を用意します。サイズはcoverを指定します。
![背景画像](https://takayamato.com/wp/wp-content/uploads/2019/09/text-bg-1024x768.jpg)
.section{
margin: 350px auto;
.inner{
width: 1200px;
margin: 0 auto;
.coloredText{
font-size: 60px;
margin: 0 auto;
color: #fff;
background-image: url(../img/text-bg.jpg);
background-size: cover;
}
}
}
ここにbackground-clip: text;を入れます。
※「background-clip: text;」は対応ブラウザがChorme、Safariのみなので、記述自体は「-webkit-background-clip: text;」となります。
.section{
margin: 350px auto;
.inner{
width: 1200px;
margin: 0 auto;
.coloredText{
font-size: 60px;
margin: 0 auto;
color: #fff;
background-image: url(../img/text-bg.jpg);
background-size: cover;
-webkit-background-clip: text;
}
}
}
![テキスト](https://takayamato.com/wp/wp-content/uploads/2019/09/8420a43d0d5f63f0166c71fc1d7ea240.png)
完成です。
画像ではなくグラデーションを入れたい場合は、下記のようにすれば画像とは違うパターンも作れます。
.section{
margin: 350px auto;
.inner{
width: 1200px;
margin: 0 auto;
.coloredText{
font-size: 60px;
margin: 0 auto;
color: #fff;
background-image: linear-gradient(to right, #000, pink);
-webkit-background-clip: text;
}
}
}
![テキスト](https://takayamato.com/wp/wp-content/uploads/2019/09/cd5a7af3f0fa50e6e196f3871e6581a8-1024x240.png)
このようになります。(かっこよくないですか?w)
また小技を見つけたら紹介します!
でわ!