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
Consideraciones:
- El resto de las propiedades del texto, como la alineación o el tamaño, las aplicamos mediante el método que usemos habitualmente.
- Tamaño de fuente: Este efecto suele verse mejor con tamaños de fuente grandes y tipografías con buen grosor.
- Contraste y Legibilidad: Asegúrate de que la imagen de fondo y el contexto general permitan que el texto siga siendo legible.
- Soporte del Navegador:
background-clip: texttiene un soporte muy bueno en los navegadores modernos. El prefijo-webkit-ayuda con versiones un poco más antiguas de Safari, Chrome, Edge, etc. - Fallback: Para navegadores muy antiguos que no soporten
background-clip: text, el texto simplemente sería transparente (invisible) o heredaría otro color. Es buena idea considerar un color de texto sólido como fallback, por ejemplo, usando la regla@supportspara aplicar el efecto solo si es compatible, y un color normal en caso contrario.
