Image replacement

Image replacement(イメージリプレースメント)はテキストを画像に入れ替えることができます。イメージリプレースメント ユーティリティの使い方の例を示します。

.text-hide クラスまたはmixinを使用して, 背景画像を持つテキストを非表示にして画像に置換できます。

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

// Usage as a mixin
.heading {
  @include text-hide;
}

見出しタグのアクセシビリティとSEOの利点を維持するために .text-hide を使用していますが, テキストの代わりに background-image を利用することもできます。

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