画像置き換え

画像置き換えクラスを使って、テキストを背景画像と入れ替えましょう。

.text-hide クラスやミックスインを使って、要素のテキストコンテンツを背景画像で置き換えます。

<h1 class="text-hide">Custom heading</h1>

// ミックスインとして使用
.heading {
  @include text-hide;
}

見出しタグのアクセシビリティと SEO の利点を維持しつつ、テキストを background-image で置き換えるには、.text-hide クラスを使います。

<h1 class="text-hide" style="background-image: url('/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;">Bootstrap</h1>