Cómo colocar el texto sobre una imagen?

A menudo, los desarrolladores web desean colocar algún texto a través de una imagen para mostrar alguna información sobre esa imagen en particular. Esto también puede desempeñar un papel importante en hacer que su sitio web o la imagen sea más atractiva, lo que mejora la posibilidad de captar la atención del usuario. Ahora hay varias posiciones donde puede agregar su texto en una imagen de la siguiente manera.

1. Esquina superior izquierda
2. Esquina izquierda inferior
3. Centro
4. Esquina superior derecha
5. Esquina inferior derecha

A continuación hemos demostrado cada una de estas posiciones.

Posicionar texto sobre una imagen

En primer lugar, agregaremos una imagen a nuestra página web usando HTML.

Html

Algún texto

En el código anterior, hemos creado un elemento div y anidado una imagen y otro elemento div. El primer div, como ya se mencionó, sostiene la imagen y el otro div. Mientras tanto, el segundo contenedor Div contiene la posición y el estilo del texto que se debe colocar en la imagen.

Producción

Se ha insertado una imagen en la página web.

Esquina superior izquierda

La primera posición del texto donde vamos a configurar es la esquina superior izquierda de la imagen. Use el siguiente fragmento de código.

CSS

.img-continer
Posición: relativo;
Ancho: 400px;

.imagen
Ancho: 100%

.arriba a la izquierda
Posición: Absoluto;
tamaño de fuente: 20px;
Font-Weight: Bold;
estilo de fuente: cursiva;
color blanco;
Arriba: 15px;
Izquierda: 30px;

La posición del primer elemento div se ha establecido en relativo para que podamos colocar absolutamente el segundo elemento div. El texto que se colocará en la imagen ha recibido algún tamaño, peso, estilo y color, mientras que para colocarlo en la esquina superior izquierda, hemos usado las propiedades superior e izquierda.

Producción

El texto se colocó con éxito en la esquina superior izquierda.

Esquina izquierda inferior

Con el fin de agregar un texto en la esquina inferior izquierda de la imagen, use el código mencionado a continuación.

CSS

.div
Posición: relativo;
Ancho: 400px;

.imagen
Ancho: 100%

.Bottomleft
Posición: Absoluto;
tamaño de fuente: 20px;
Font-Weight: Bold;
estilo de fuente: cursiva;
color blanco;
Abajo: 3%;
Izquierda: 8%;

Sin embargo, el resto del código es el mismo, para colocar el texto en la esquina inferior izquierda, hemos establecido la propiedad inferior en 3%, y la propiedad dejó al 8%. Puede cambiar los valores de estas propiedades para comprender cómo funcionan.

Producción

El texto se colocó en la esquina inferior izquierda con gran facilidad.

Centro

Del mismo modo, para colocar su texto en la posición central, considere el ejemplo a continuación.

CSS

.div
Posición: relativo;
Ancho: 400px;

.imagen
Ancho: 100%

.centro
Posición: Absoluto;
tamaño de fuente: 20px;
Font-Weight: Bold;
estilo de fuente: cursiva;
color blanco;
Arriba: 40%;
Izquierda: 40%;

Con el fin de ajustar el texto en la posición central de la imagen, hemos establecido la propiedad superior y dejó una propiedad al 40%.

Producción

Hemos colocado con éxito el texto en el centro de la imagen

Esquina superior derecha

Consulte el código a continuación para comprender cómo colocar el texto en la esquina superior derecha de la imagen.

CSS

.div
Posición: relativo;
Ancho: 400px;

.imagen
Ancho: 100%

.parte superior derecha
Posición: Absoluto;
arriba: 2%;
Derecho: 10%;
tamaño de fuente: 20px;
Font-Weight: Bold;
estilo de fuente: cursiva;
color blanco;

Lo que simplemente hemos hecho para colocar el texto en la esquina superior derecha es que hemos establecido la propiedad superior al 2%, y la propiedad correcta al 10%. Esta no es una regla dura y rápida, por lo tanto, puede cambiar estos valores de acuerdo con su deseo.

Producción

El texto se insertó en la esquina superior derecha de la imagen.

Esquina inferior derecha

La última posición que vamos a demostrar es la esquina inferior derecha de la imagen. Sigue el código a continuación.

CSS

.div
Posición: relativo;
Ancho: 400px;

.imagen
Ancho: 100%

.abajo a la derecha
Posición: Absoluto;
Abajo: 5%;
Derecho: 10%;
tamaño de fuente: 20px;
Font-Weight: Bold;
estilo de fuente: cursiva;
color blanco;

Como puede ver, el resto del código es el mismo que en ejemplos anteriores con solo diferencia que para colocar el texto en la esquina inferior derecha hemos usado la propiedad inferior y la propiedad correcta.

Producción

El texto se colocó en la esquina inferior derecha.

Conclusión

Para colocar su texto sobre una imagen, coloque su imagen y texto dentro de un contenedor Div y coloque absolutamente el texto, mientras que le da al Div una posición relativa. Diferentes posiciones que puede colocar su texto sobre una imagen son la esquina superior izquierda, la esquina inferior izquierda, el centro, la esquina superior derecha y la esquina inferior derecha. Esta tarea se puede realizar utilizando varias propiedades CSS. En esta publicación hemos demostrado cada una de estas posiciones junto con ejemplos adecuados.