Bootstrap nos permite reemplazar el texto con una imagen de fondo para cualquier elemento de texto como elemento de párrafo, elemento de encabezado, etc. Con el uso de la clase .text-hide , podemos reemplazar el contenido de un elemento con una imagen de fondo.
Sintaxis:
<element class = "text-hide"
style = "background-image: url('Specify URL of image here');">
</element>
En la sintaxis anterior, la clase text-hide se usa para ocultar primero el texto del elemento y se agrega una imagen de fondo al elemento usando la propiedad background-image de CSS .
Ejemplo:
<html>
<head>
<!-- Link Bootstrap CSS and JS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>
<h1 class="text-hide"
style="background-image: url('https://media.geeksforgeeks.org/wp-content/cdn-uploads/GeeksforGeeksLogoHeader.png');
background-repeat: no-repeat;
width: 500px; height: 500px; ">
GeeksforGeeks
</h1>
</body>
</html>
Producción:
Nota : esta clase también ayuda a mejorar el SEO de un sitio web, ya que al usar esta clase podemos agregar imágenes al sitio web usando etiquetas de encabezado, y se considera que el uso de etiquetas de encabezado es bueno para el SEO de una página web.
Publicación traducida automáticamente
Artículo escrito por chaitanyashah707 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA