初めに

Cssだけで背景が透けてみえるお洒落な文字が出来る方法を探したら、background-clipというcssのプロパティがあったのでそれについて学習した内容を記事にします。

※内容に間違いなどがある場合はご指摘をよろしくお願いします。

background-clipとは

cssのプロパティ。背景画像の表示領域を指定する際に使います。

早速使ってみる

まずはテスト用の背景画像を用意しました。

指定できる値が４種類あったのでhtmlで原本の画像が入るものを含め合計5つの箱を用意します。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="style.css" />
  <title>background-clip</title>
</head>

<body>

  <div class="none"></div>
  <div class="border-box"></div>
  <div class="padding-box"></div>
  <div class="content-box"></div>
  <div class="text">
    <h1>TestTestTest</h1>
  </div>

</body>

</html>

①border-box
ボーダボックスまでbackgound画像の表示領域を広げます。

/* ①border-box */
.border-box {
  width: 150px;
  height: 150px;
  margin: 100px 10px;
  padding: 10px;
  border: 10px dashed #0000ff;
  background-size: cover;
  background-image: url("test.jpg");
  background-clip: border-box;
}

②padding-box
パディングボックスまでbackgound画像の表示領域を広げます。

/* ②padding-box */
.padding-box {
  width: 150px;
  height: 150px;
  margin: 100px 10px;
  padding: 10px;
  border: 10px dashed #0000ff;
  background-size: cover;
  background-image: url("test.jpg");
  background-clip: padding-box;
}

③content-box
コンテントボックスまでbackgound画像の表示領域を広げます。

/* ③content-box */
.content-box {
  width: 150px;
  height: 150px;
  margin: 100px 10px;
  padding: 10px;
  border: 10px dashed #0000ff;
  background-size: cover;
  background-image: url("test.jpg");
  background-clip: content-box;
}

④text
文字列の領域までbackgound画像の表示領域を広げます。

/* ④text-box */
.text {
  width: 150px;
  height: 150px;
  margin: 100px 10px;
  border: solid 30px;
  background-size: cover;
  background-image: url("test.jpg");
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

文字列の場合、親要素にstyleを適用します。また、文字の色はtransparentにして透明にし、まだ全てのブラウザーで使えるわけではないので、-webkit-background-clip: text;と書く必要があります。

結果

background-clipを適用しない場合、デフォルトはborder-boxになるみたいです。（一番左側の画像）

文字列もが透けて背景が見えるのでお洒落です。（一番右側の画像）

参考サイト

https://developer.mozilla.org/ja/docs/Web/CSS/background-clip
https://qiita.com/NoxGit/items/20b39e0051ce94720421