En este artículo, aprenderemos a crear un retrato de texto usando CSS en unos simples pasos. Si quieres saberlo, sigue leyendo este artículo. Hemos especificado todos los pasos que debe seguir. Entonces, comencemos a diseñar el retrato de texto.
Retrato de texto usando CSS
Enfoque: Estos son los pasos necesarios para obtener el retrato de texto deseado.
- Cree un documento HTML con un montón de texto «GeeksforGeeks», para repetir la palabra en particular, usamos la función de repetición de JavaScript() como se muestra debajo del código HTML.
- Para oscurecer el fondo y hacer que el retrato sea atractivo, use la propiedad de fondo junto con la configuración de la imagen de fondo usando la función url() en CSS. Para evitar la repetición de la imagen, configure la repetición de fondo como sin repetición colocando la imagen en el centro. Para una mejor visualización, reduzca el espacio entre las líneas.
- Para imprimir el fondo con el texto en primer plano, debemos recortar el texto y agregar algunas propiedades de estilo, como tamaño de fondo , fuente, etc.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Text Portrait using CSS</title>
<style>
body {
background: rgb(236, 236, 236);
overflow: hidden;
font-family: "Segoe UI", sans-serif;
}
p {
line-height: 14px;
background: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20210628182253/gfglogo.png");
-webkit-background-clip: text;
background-attachment: fixed;
background-repeat: no-repeat;
-webkit-text-fill-color: rgba(255, 255, 255, 0);
background-size: 80vh;
background-position: center;
}
</style>
</head>
<body>
<p id="text"></p>
<script>
let str = "GeeksForGeeks ";
document.getElementById("text").innerHTML = str.repeat(500);
</script>
</body>
</html>
Producción:
salida final