Bootstrap图片替换

Bootstrap是一个流行的前端框架，它提供了许多预先定义的CSS类和组件，可以帮助开发者快速构建响应式网站。在Bootstrap中，图片可以通过<img>标签插入到网页中，并使用相应的Bootstrap类进行样式化。那么Bootstrap图片怎么替换?

注意：在 v4.1 中，class 和 mixin 已被弃用，将在 v5 中完全删除。text-hide() 是一个用于隐藏文本的 CSS 类。

一、图片替换

利用.text-hide或 mixin 帮助将元素的文本内容替换为背景图像。

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

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

二、维护标题

使用.text-hidebackground-image来维护标题标签的可访问性和 SEO 优势，但希望使用而不是文本。

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