首页 / 开发 / 前端开发 / Bootstrap教程

Bootstrap图片替换

Bootstrap教程

类型：前端开发

Bootstrap是一组用于网站和网络应用程序开发的开源前端框架，包括HTML、CSS及JavaScript的框架，提供字体排印、窗体、按钮、导航及其他各种组件及Javascript扩展，旨在使动态网页和Web应用的开发更加容易。

百科词条 访问网站

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>

广告合作

QQ群号：4114653