圖像替換 (Image replacement)

使用圖像替換 class 將文字與背景圖像替換。

六角學院 六角學院

六角學院的 Bootstrap 課程上線囉,立即與萬人一同學習最專業、最深入的 Bootstrap 課程。

立即上課去

使用 .text-hide 或 Sass mixin 隱藏一個元素的文字內容並替換成背景圖片。

<h1 class="text-hide">Custom heading</h1>
// Usage as a mixin
.heading {
  @include text-hide;
}

使用 .text-hide 來維持標籤的親和性及 SEO,但要使用 background-image 取代文字內容。

Bootstrap

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