Las imágenes en una página web a veces pueden tener texto agregado. Los subtítulos se pueden hacer a partir de cómo colocar el texto sobre una imagen. No puede poner texto encima de una imagen con solo elementos HTML. Necesitamos usar propiedades CSS para esto.
Los desarrolladores web crean sitios web que se ven bien para que los usuarios estén más interesados y felices. La colocación de texto sobre una imagen es una forma en que los desarrolladores agregan un elemento visual a un sitio web. Teniendo en cuenta la capacidad de respuesta, es importante asegurarse de que el texto permanezca igual incluso si la imagen cambia de tamaño porque responde.
Cómo colocar el texto sobre una imagen
Al crear una foto galería o algo así, es posible que deba colocar algún texto de título o descripción sobre la imagen. Puede usar los métodos de posicionamiento CSS en combinación con la propiedad de margen para colocar o colocar el texto sobre una imagen (es decir, el elemento).
Esquina superior izquierda
La primera posición de la texto donde vamos a establecer es la esquina superior izquierda de la imagen. Use el siguiente fragmento de código.
CSS: Establecemos la posición del primer elemento div en”relativo”para que podamos establecer la posición del segundo elemento div en”absoluto.” Al texto que irá en la imagen se le ha dado un tamaño, peso, estilo y color. Las propiedades superior e izquierda se han utilizado para colocar el texto en la esquina superior izquierda.
Esquina inferior izquierda
Con el propósito de agregar un texto en la esquina inferior izquierda de la imagen use el código mencionado a continuación.
CSS: El resto del código es el mismo, sin embargo, para colocar el texto en la esquina inferior izquierda, hemos establecido la propiedad inferior en 3 %, y dejó la propiedad al 8%. Puede cambiar los valores de estas propiedades para entender cómo funcionan.
Centro
Del mismo modo, para colocar su texto en la posición central, considere el ejemplo mencionado a continuación. Con el fin de ajustar el texto en la posición central de la imagen, hemos establecido la propiedad superior y la propiedad izquierda al 40%.
Esquina superior derecha
Lo que simplemente hemos hecho para colocar el texto en la esquina superior derecha es que hemos establecido la propiedad superior en 2% y la propiedad derecha en 10%. Esta no es una regla dura y rápida, por lo tanto, puede cambiar estos valores según su deseo.
Esquina inferior derecha
Como puede ver, el resto del código es el igual que en los ejemplos anteriores con la única diferencia de que para colocar el texto en la esquina inferior derecha hemos utilizado la propiedad bottom y la propiedad right.
FAQ
¿Cómo cambio la posición? de texto en una imagen?
Con la propiedad de posición de CSS, puede establecer dónde va el texto sobre una imagen. Puede hacer esto colocando la imagen y el texto en un”div”en HTML. Luego, haga que la posición de div sea”relativa”y la posición del texto”absoluta”. Los elementos absolutos se colocan en función de dónde está su elemento principal (div).
¿Cómo coloco texto sobre una imagen receptiva?
Puedes poner texto en una imagen usando el Propiedad de posición CSS. Para hacer esto, agregue position:absolute al texto y position:relative a la imagen. Pon ambos dentro de un elemento div>. También podemos usar las propiedades superior, inferior, izquierda y derecha para colocar texto en un lugar determinado de la imagen.
¿Cómo especifico la posición del texto en CSS?
h1 { text-align: centro; } h2 { texto-alinear: izquierda; } h3 { texto-alinear: derecha; … Alinee la última línea de texto en tres elementos
: p.a { text-align-last: right; } p.b { texto-alinear-último: centro; } p.c { … Establecer la alineación vertical de una imagen en un texto: img.a { vertical-align:baseline; } img.b { vertical-align: text-top; }