文字を素敵にアレンジしたいんだけど〜♪
いいのがあるよ♪教えるね！
目次
背景をテキストマスク
See the Pen Untitled by ちいうさ (@zqnixpal-the-looper) on CodePen.
解説
HTML
<p class="text-mask">Code voyage</p>CSS
.text-mask {
background: url(https://picsum.photos/id/35/500/300) center / cover;
background-clip: text;
color: transparent;
font-family: "Goldman", sans-serif;
font-size: 48px;
font-weight: 700;
line-height: 1.2;
}
/* レイアウト用 */
body {
display: grid;
place-items: center;
width: 100%;
height: 50vh;
background: #333;
}background-clip: text; は、背景画像をテキストの形で切り抜く効果を出します。color: transparent; を同時に指定することで、文字自体は透明になり、背景が見えるようにします。
アレンジ
See the Pen 背景をテキストマスク by ちいうさ (@zqnixpal-the-looper) on CodePen.
背景にテキストマスクかけれるんだね♪
簡単でしょ？また色々教えるね！