background-clipでテクスチャ画像を使ったテキストやボーダーを表現する

Safari 18.2でbackground-clip: border-areaがサポートされた。

サポート状況は以下のとおり。

background-clipを使うことで、background-imageなどで指定した背景を切り抜き、表示することができる。

デザイン性重視のウェブサイトでも、画像をつくって<img src="..." alt="テキストの説明">みたいなことをせずに、そのまま表示できる。ただし、背景画像を透過させるためにcolor: transparentをしているため、background-imageの読み込みに失敗すると何も見えなくなってしまうため、フォールバックのテストが必要だ。

<section class="clip">
  Hello world.
<section>

.clip {
  /* 色が残っていると背景画像が見えないため */
  color: transparent;
  border-color: transparent;

  background-image:
    url(/* ボーダーのテクスチャ */),
    url(/* テキストのテクスチャ */);
  background-clip:
    border-area,
    text;
}

デモ

※一部ブラウザでは正常に表示できません

デモ画像