css プロパティである、background-clip を使うと背景をテキストで切り取ることが出来ます。これを使うことで、背景がグラデーションカラーのテキスト、背景が画像のテキストを作ることが出来ます。この記事ではその方法を確認していきます。
background-clipを使うとおしゃれなデザインが作れるよ
背景とテキストを配置する
|-- folder/
|-- index.html
|-- style.css
`-- images/
`-- back1.jpg<div class="wrapper">
<h1>section</h1>
</div>.wrapper {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
/* background: radial-gradient(circle, rgba(101, 127, 255, 0.8379945728291316) 0%, rgba(172, 217, 65, 0.7063419117647058) 36%, rgba(216, 69, 213, 0.686734068627451) 73%); */
background-image: url(images/back1.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.wrapper h1 {
font-size: 20rem;
font-weight: bold;
text-transform: uppercase;
user-select: none;
}8: 背景にグラデーションを使いたい場合の指定方法。
グラデーションジェネレーターを使うと便利です。
9-11: background-image プロパティで back1.jpg 画像ファイルを読み込み、背景いっぱいに表示させます。
うまく指定出来ていると以下のようなテキストと背景が重なった状態になります。
background-clip で背景をテキストで切り取る
.wrapper {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
/* background: radial-gradient(circle, rgba(101, 127, 255, 0.8379945728291316) 0%, rgba(172, 217, 65, 0.7063419117647058) 36%, rgba(216, 69, 213, 0.686734068627451) 73%); */
background-image: url(images/back1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.wrapper h1 {
font-size: 20rem;
font-weight: bold;
text-transform: uppercase;
}12-14: wrapper 要素に background-clip プロパティを指定します。
うまく切り取られているのがわかります。
以上background-clip で背景をテキストで切り取る方法でした。
