¿Cómo usar texto como fondo usando CSS?

Hay algunos diseños de sitios web que requieren el uso de texto como fondo. Esto se puede lograr fácilmente con CSS usando los siguientes métodos.

Uso de un elemento con posición absoluta dentro de un elemento con posición relativa: el elemento con posición absoluta dentro de un elemento con posición relativa con un elemento absoluto que tiene un valor de índice z más bajo hace que el texto aparezca como fondo.

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Using text as background with CSS
    </title>
  
    <style>
        .container {
            position: relative;
        }
  
        .containerbackground {
            margin: 3rem;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            z-index: -1;
            transform: rotate(300deg);
            -webkit-transform: rotate(300deg);
            color: #c6afaf;
        }
    </style>
</head>
  
<body>
    <div class="container">
        <div class="containerbackground">
            Background Text
        </div>
        <p>Foreground text</p>
        <p>Welcome to GeeksforGeeks</p>
        <p>Start Learning</p>
    </div>
</body>
  
</html>

Producción:

Uso de :after pseudo elementos: El uso de :after pseudo elementos con :after pseudo elementos que tienen un valor de índice z más bajo hacen que aparezca como fondo. Use el texto dentro: después del pseudo elemento para que aparezca el texto como fondo.

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Using text as background with CSS
    </title>
  
    <style>
        .bgtext {
            position: relative;
        }
  
        .bgtext:after {
            margin: 3rem;
            content: "Background text";
            position: absolute;
            transform: rotate(300deg);
            -webkit-transform: rotate(300deg);
            color: rgb(187, 182, 182);
            top: 0;
            left: 0;
            z-index: -1;
        }
    </style>
</head>
  
<body>
    <div class="bgtext">
        <p>Foreground text</p>
        <p>Welcome to GeeksforGeeks</p>
        <p>Start Learning</p>
    </div>
</body>
  
</html>

Producción:

Uso de :before pseudo elementos: El uso de :before pseudo elementos con :before pseudo elementos que tienen un valor de índice z más bajo hacen que aparezca como fondo. Use el texto dentro : antes del pseudo elemento para que aparezca el texto como fondo.

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Using text as background with CSS
    </title>
  
    <style>
        .bgtext {
            position: relative;
        }
  
        .bgtext:before {
            margin: 3rem;
            content: "Background text";
            position: absolute;
            transform: rotate(300deg);
            -webkit-transform: rotate(300deg);
            color: rgb(187, 182, 182);
            top: 0;
            left: 0;
            z-index: -1;
        }
    </style>
</head>
  
<body>
    <div class="bgtext">
        <p>Foreground text</p>
        <p>Welcome to GeeksforGeeks</p>
        <p>Start Learning</p>
    </div>
</body>
  
</html>       

Producción :

Publicación traducida automáticamente

Artículo escrito por chaitanyashah707 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta