Breakdance Web Builder

Cómo rellenar un texto con una imagen con CSS

Publicado el 14 de enero de 2022
Actualizado el 14 de enero de 2022

En CSS a un texto, aparte de poder asignarle un color, también podemos aplicarle una máscara de forma que dicho texto esté relleno con una imagen.

Para rellenar un texto con una imagen necesitamos que éste sea transparente y recortar el fondo a la forma de dicho texto. Para ello usamos las propiedades CSS background-clip: text y -webkit-text-fill-color: transparent.

En la propiedad background indicamos la URL de la imagen que vamos a usar como fondo del texto.

Usaremos -webkit para asegurar la compatibilidad con todos navegadores y, además, la propiedad color e indicamos un color de fondo por si algo falla (por ejemplo que la URL de la imagen no exista).

Aplicamos las propiedades a través de una clase CSS para poder usarlas solo en los textos que nos interese, aunque también se pueden aplicar a un selector.

Este es el fragmento de código resultante:

.texto-fondo-imagen { background: #0d0628 url('https://tudominio.com/tuimagen.ext'); -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; color: #0d0628; }
Lenguaje del código: PHP (php)

Y este, el resultado:

TEXTO CON UNA IMAGEN DE FONDO

El resto de la propiedades del texto, como la alineación o el tamaño, las aplicamos mediante el método que usemos habitualmente, teniendo en cuenta que este efecto funciona mejor con textos grandes.

Te recomiendo

Libros que me ayudan

Donde alojo mis sitios web

LucusHost, el mejor hosting

Sitio alojado en un servidor verde según The Green Web Foundation

Prueba Amazon Prime gratis

Aviso legal | Condiciones de contratación | Política de privacidad | Política de cookies
© 2017-2022 · Jose R. Bernabeu ·
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram Ir al contenido