LucusHost, el mejor hosting

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://olladiscoduro.es/wp-content/uploads/patatas-rellenas-bujalance-540.jpg');
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    color: #0d0628;
}

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.

Algunos de los enlaces de este artículo pueden corresponder a programas de afiliación de herramientas que uso, he probado o sé que son de utilidad.

El uso de mis enlaces de afiliado nunca aumenta el precio para ti, pero me dan una pequeña comisión que me permite seguir generando más y mejor contenido.

Por ejemplo, si compras en Amazon, puedes ayudarme haciéndolo con mi enlace de referencia:
https://olladiscoduro.es/amazon

¡Gracias de antemano por tu apoyo!