|
Ultima modificación |
Ver Log
|
| Rev |
Autor |
Línea Nro. |
Línea |
| 1 |
efrain |
1 |
---
|
|
|
2 |
layout: docs
|
|
|
3 |
title: Image replacement
|
|
|
4 |
description: Swap text for background images with the image replacement class.
|
|
|
5 |
group: utilities
|
|
|
6 |
---
|
|
|
7 |
|
|
|
8 |
{{< callout warning >}}
|
|
|
9 |
##### Warning
|
|
|
10 |
|
|
|
11 |
The `text-hide()` class and mixin has been deprecated as of v4.1. It will be removed entirely in v5.
|
|
|
12 |
{{< /callout >}}
|
|
|
13 |
|
|
|
14 |
Utilize the `.text-hide` class or mixin to help replace an element's text content with a background image.
|
|
|
15 |
|
|
|
16 |
```html
|
|
|
17 |
<h1 class="text-hide">Custom heading</h1>
|
|
|
18 |
```
|
|
|
19 |
|
|
|
20 |
```scss
|
|
|
21 |
// Usage as a mixin
|
|
|
22 |
.heading {
|
|
|
23 |
@include text-hide;
|
|
|
24 |
}
|
|
|
25 |
```
|
|
|
26 |
|
|
|
27 |
Use the `.text-hide` class to maintain the accessibility and SEO benefits of heading tags, but want to utilize a `background-image` instead of text.
|
|
|
28 |
|
|
|
29 |
<div class="bd-example">
|
|
|
30 |
<h1 class="text-hide" style="background-image: url('/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;">Bootstrap</h1>
|
|
|
31 |
</div>
|
|
|
32 |
|
|
|
33 |
```html
|
|
|
34 |
<h1 class="text-hide" style="background-image: url('...');">Bootstrap</h1>
|
|
|
35 |
```
|