画像をテキストのかたちにクリッピング

HTML

<div class="backgroundclip">Coffee</div>

CSS

.backgroundclip {
  background-clip: text;
  -webkit-background-clip: text;
  background-image: url(picture.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  color: rgba(0 0 0 / 0);
  font-size: 200px;
  font-weight: 700;
  text-transform: uppercase;
}