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
=
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
=
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
=
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