CSSで文字の形に背景画像を切り抜く

background-clipプロパティは、背景の描画領域をしていできる。値にtextを指定すると、背景画像をテキストの形に切り抜ける。

background-clip: text

以下が使用例のHTMLとCSS。

<!-- HTML側 -->
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p class="logo">
  文字列で<br />切り抜く
  </p>
</body>
</html>

/* CSS側 */
.logo {
  background: url(./bg.jpg);
  color: transparent;             /* テキストの色を透明に指定 */
  -webkit-background-clip: text;  /* Chrome Edge Safari用 */
  background-clip: text;          /* Firefoxはプレフィックス不要 */
}

結果が以下。