¿Cómo poner el texto dentro de un icono creado?

La tarea es poner un texto dentro de un icono creado. Esta publicación repasará algunas de las diferentes formas en que puede colocar un texto dentro/sobre un icono/imagen(es) creado(s). Todas las soluciones discutidas siguen una presentación diferente basada en la misma idea base, es decir, para escribir/colocar el texto sobre la imagen/icono, convertir la imagen/icono en una imagen/icono de fondo usando la división y luego escribir el texto.

Solución 1:

<!DOCTYPE html>
<html>
    <head> </head>
    <body>
        <!--Add HTML:-->
  
        <div class="container">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200728095608/geeksforgeeks56-300x68.png" 
                 alt="GFG"
                 style="width: 100%;" />
            <div class="text-block">
                <h4>Programming</h4>
                <p>Geeks For Geeks</p>
            </div>
        </div>
  
        <style>
            //Add CSS:
            * {
                box-sizing: border-box;
            }
  
            /* Container holding the image and the text */
            .container {
                position: relative;
            }
  
            /* Bottom right text */
            .text-block {
                position: absolute;
                bottom: 0px;
                right: 20px;
                background-color: black;
                color: white;
                padding-left: 20px;
                padding-right: 20px;
            }
        </style>
    </body>
</html>

Producción:

Explicación: Al usar la división .container hacemos que la imagen sea una imagen de fondo y luego, al usar la división .text-block de estilo, creamos un cuadro con texto y lo colocamos en una posición absoluta (este valor le dice al navegador que lo que sea que va a ser position debe eliminarse del flujo normal del documento y, en su lugar, colocarse en una ubicación exacta en la página) con un estilo preferido usando CSS.

Solución 2:

<!DOCTYPE html>
<html>
    <head> </head>
    <body>
        <!-- Write HTML code here -->
  
        <div class="container">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200728095608/geeksforgeeks56-300x68.png" 
                 alt="GFG" 
                 style="width: 100%;" />
            <div class="content">
                <h1>Heading</h1>
                <p>Geeks For Geeks</p>
            </div>
        </div>
  
        <style>
            // CSS Code
            * {
                box-sizing: border-box;
            }
  
            .container {
                position: relative;
                max-width: 800px; /* Maximum width */
                margin: 0 auto; /* Center it */
            }
  
            .container .content {
               /* Position the background text */
                position: absolute;
     /* At the bottom. Use top:0 to append it to the top */
                bottom: 0px; 
              /* Black background with 0.5 opacity */
                background: rgba(0, 0, 0, 0.3); 
                color: #f1f1f1; /* Grey text */
                width: 100%; /* Full width */
                padding: 20px; /* Some padding */
            }
        </style>
    </body>
</html>

Producción:

Explicación: Usando el mismo enfoque que el anterior, pero en lugar de crear un cuadro de texto, superponemos el contenido en la imagen/icono en este enfoque, pero simplemente ajustamos la propiedad de ancho de la división usando CSS, es decir, configurando «ancho: 100%»; haga que el texto se superponga en todo el ancho de la imagen/icono.

Solución 3: pase el mouse sobre la imagen

<!DOCTYPE html>
<html>
    <head> </head>
    <body>
        <!-- Write HTML code here -->
  
        <div class="container">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200728095608/geeksforgeeks56-300x68.png" 
                 alt="GFG"
                 style="width: 100%;" />
            <div class="overlay">Geeks For Geeks</div>
        </div>
  
        <style>
            * {
                box-sizing: border-box;
            }
  
            /* Container needed to position
          the overlay. Adjust the width as needed */
            .container {
                position: relative;
            }
  
            /* Make the image to responsive */
            .image {
                display: block;
                width: 100%;
                height: auto;
            }
  
            /* The overlay effect - lays on top of 
          the container and over the image */
            .overlay {
                position: absolute;
                bottom: 0;
              /* Black see-through */
                background: rgba(0, 0, 0, 0.5); 
                color: #f1f1f1;
                width: 100%;
                transition: 0.5s ease;
                opacity: 0;
                color: white;
                font-size: 20px;
                padding: 20px;
                text-align: center;
            }
  
            /* When you mouse over the 
          container, fade in the overlay title */
            .container:hover .overlay {
                opacity: 1;
            }
        </style>
    </body>
</html>

Salida:
Original:

En vuelo estacionario:

Explicación: en esta solución, hacemos que la imagen/icono sea una imagen/icono de fondo y superponemos el texto en la imagen como en la solución anterior, pero hacemos que el texto/contenido desaparezca usando la “opacidad: 0;” estilo en la división .overlay y cuando el usuario se desplaza sobre la imagen, volvemos a establecer la opacidad visible usando «opacity: 1;».

Publicación traducida automáticamente

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

Deja una respuesta Cancelar la respuesta