背景画像が固定のとき、一つレイヤーを挟んでテキストを切り抜くときに、切り抜いたテキストと背景画像の一致させるcssです。

簡単に言えば、キャッチ画像の「TEXT」のようなことを実装してみようということです。

実装したものは次のものです。

See the Pen Untitled by takblog (@blanks-site) on CodePen.

確認してもらうとわかりますが、スクロールしたら、切り抜かれているテキストの背景位置も変わり、背景画像と一致しています。

文字の白背景を少し透かしていますが、分かりやすく透かしているだけで、当然透かさなくても、同じようにテキストは切り抜かれます。

これを使える条件はbackground-attachment: fixedを背景画像に適用している時です。

必要なcssだけで別で下記に抜き出して記述します。実装しているcss全部を見たい方は、codepenで確認してください。

切り抜くテキストと背景画像のbackground-poistionやbackground-sizeは同じものを指定してください。

.bg{
  background: fixed url(背景画像パス) no-repeat left center / cover;
}
.clip-text{
  background: fixed url(背景画像パス) no-repeat left center / cover;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}