Bootstrap是一個(gè)流行的前端框架，它提供了許多預(yù)先定義的CSS類和組件，可以幫助開發(fā)者快速構(gòu)建響應(yīng)式網(wǎng)站。在Bootstrap中，圖片可以通過<img>標(biāo)簽插入到網(wǎng)頁中，并使用相應(yīng)的Bootstrap類進(jìn)行樣式化。那么Bootstrap圖片怎么替換?

注意：在 v4.1 中，class 和 mixin 已被棄用，將在 v5 中完全刪除。text-hide() 是一個(gè)用于隱藏文本的 CSS 類。

一、圖片替換

利用.text-hide或 mixin 幫助將元素的文本內(nèi)容替換為背景圖像。

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

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

二、維護(hù)標(biāo)題

使用.text-hidebackground-image來維護(hù)標(biāo)題標(biāo)簽的可訪問性和 SEO 優(yōu)勢，但希望使用而不是文本。

<h1 class="text-hide" style="background-image: url('...');">Bootstrap</h1>