画像置き換え

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

注意

text-hide() クラスとミックスインは、バージョン4.1で非推奨となりました。バージョン5で完全に削除される予定です。

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

<h1 class="text-hide">Custom heading</h1>
// ミックスインとして使用
.heading {
  @include text-hide;
}

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

Bootstrap

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