Image replacement

Image replacement(イメージリプレースメント)はテキストを画像に入れ替えることができます。

text-hide() クラスとmixinはv4.1から廃止されています。v5で完全に削除されます。

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

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

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

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

Bootstrap

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

v4.2