En este artículo, usaremos HTML y CSS para colocar la imagen en el fondo del texto. Para establecer la imagen en el fondo del texto, se utilizan algunas propiedades CSS.
Código HTML: El código HTML se utiliza para crear una estructura básica del cuerpo. En el siguiente código, usaremos la etiqueta de párrafo para escribir contenido de texto.
<!DOCTYPE html> <html> <head> <title> How to Add Image in Text Background using HTML and CSS ? </title> </head> <body> <p>GeeksforGeeks</p> </body> </html>
Código CSS: La propiedad CSS se utiliza para establecer la imagen como fondo en el texto. La propiedad background-image se utiliza para establecer una imagen como fondo. La propiedad -webkit-text-fill-color se usa para dar al texto un color transparente, la imagen de fondo se mostrará a través del texto, completando así el efecto de recorte.
<style>
p {
background-image: url(demo.jpg);
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-top: 200px;
font-size: 120px;
text-align: center;
font-weight: bold;
text-transform: uppercase;
font-family: 'Steelfish Rg', 'helvetica neue',
helvetica, arial, sans-serif;
font-weight: 800;
-webkit-font-smoothing: antialiased;
}
</style>
Código completo: en esta sección, combinaremos las dos secciones anteriores para agregar una imagen como fondo de texto.
<!DOCTYPE html>
<html>
<head>
<title>
How to Add Image in Text Background
using HTML and CSS ?
</title>
<style>
p {
background-image: url(demo.jpg);
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-top: 200px;
font-size: 120px;
text-align: center;
font-weight: bold;
text-transform: uppercase;
font-family: 'Steelfish Rg', 'helvetica neue',
helvetica, arial, sans-serif;
font-weight: 800;
-webkit-font-smoothing: antialiased;
}
</style>
</head>
<body>
<p>GeeksforGeeks</p>
</body>
</html>
Producción: