Cómo superponer varias imágenes usando CSS

CSS significa hoja de estilo en cascada. Es un lenguaje de hojas de estilo que define la presentación del documento en un lenguaje de marcado como HTML. La hoja de estilo en cascada diferencia el contenido y otras presentaciones visuales como colores, diseño, fuentes y temas. Esta diferenciación mejora el acceso al contenido y controla la especificación de las presentaciones. CSS define un tema común para las páginas web seleccionadas y es visible en todo el sitio web. Los detalles del archivo CSS se mantienen separados para reducir los problemas complejos y la estructura de contenido redundante.

CSS está disponible para superponer varias imágenes, es decir, colocar una imagen encima de otra imagen. Hay tres métodos para hacer esto. Echemos un vistazo a cada uno de ellos uno por uno.

1. Usando la cuadrícula CSS:

Alfiler

Una cuadrícula CSS es la función CSS bidimensional más potente que maneja filas y columnas y el contenido que contiene. Puede trabajar con elementos principales y elementos secundarios al trabajar con reglas CSS. La cuadrícula en CSS ha cambiado fundamentalmente la forma en que diseña la página web y su contenido. Para trabajar con la cuadrícula, debe conocer el contenedor de la cuadrícula, el elemento de la cuadrícula, la línea de la cuadrícula y la celda de la cuadrícula. También incluye otros términos como pista de cuadrícula y área de cuadrícula. Los elementos secundarios de un contenedor de cuadrícula pueden situarse como si pareciera que se superponen a otros.

Puede crear tamaños de pista fijos y flexibles en una cuadrícula utilizando píxeles. Especificar un cierto número de píxeles puede configurar la cuadrícula para que se ajuste al diseño deseado. Para especificar una pista de cuadrícula flexible, puede mencionar los valores en términos de porcentaje.

La característica más importante de CSS Grid es que puede superponer imágenes cambiando los índices z sin interrumpir el flujo normal del documento. Al usar una cuadrícula CSS, puede trabajar con cualquier alto y ancho de dicho elemento. Además, la imagen superior siempre se coloca hacia abajo, lo que se alinea con la esquina inferior izquierda. La imagen se alineará con el borde izquierdo del elemento contenedor.

El código HTML para ello:

<div class=”pila de imágenes”>

<div class=”image-stack__item image-stack__item—arriba”>

<img src=”Https://sourceoftheimage.com/s.cdpn.io.110238/image1.jpeg” alt=”La primera imagen”>

</div>

<div class=”imagen-pila__elemento imagen-pila__elemento—abajo”>

<img src=https://otra-fuente.com/s.cdpn.io/110238/retrato-1-segundaImagen.jpg alt=”segunda imagen”>

</div></div>

Puede agregar el atributo role=”presentation” al elemento si la imagen tiene una apariencia decorativa. Con esta especificación, la imagen no se mostraría a los lectores de la pantalla.

Ahora tenemos que especificar el ancho de las columnas en la cuadrícula tomada en consideración. Aquí hay varias formas de hacerlo, pero vamos a crear una cuadrícula de 12 columnas porque generalmente se usa la cuadrícula de 12 columnas.

Para ello, vamos a especificar lo siguiente en nuestro archivo CSS en el elemento padre, que contiene otros elementos:

.imagen-pila

{

Pantalla: cuadrícula;

Columnas de plantilla de cuadrícula: repetir (12, 1fr);

Posición: relativa;

}

Grid-template-columns es una característica para especificar el número de columnas que va a tener una grilla. Considerando que, 1fr especifica al navegador para calcular la cantidad de espacio disponible. Estas cosas son útiles cuando hay espacios entre columnas y filas.

Posición: relativo es importante aquí. Permite que el índice z de las imágenes funcione de acuerdo con nuestros requisitos y especificaciones. Una vez que tenga una cuadrícula funcional disponible, debe mirar el ancho de las imágenes. Para agregar ancho a las imágenes, la especificación ideal es especificar el ancho en porcentajes. Ahora, debe comenzar con el ancho total del componente relacionado con la imagen. El ancho de la imagen es de 844 px, lo que significa que es del 100%. El ancho de la imagen en la parte superior es de 521 px. Aquí, podemos dividir 521px por 844px. Ahora el valor resultante debe multiplicarse por 100, lo que equivale aproximadamente a 61,7 %.

Si redondea hacia arriba 61,7% a 62%, verá que obtiene un valor en el medio de 58% y 66%. Por lo tanto, vamos a tomar el 66%. Para la imagen de arriba, tenemos el siguiente código que va en CSS:

.image-stack__item—superior

{

Cuadrícula-columna: 1/span 8;

Fila de cuadrícula: 1; // debe estar en la misma fila que la segunda imagen

Relleno superior: 20% // esto coloca la imagen hacia abajo y la mantiene proporcional.

índice z: 1; //esto representa la imagen en la parte superior de la foto inferior.

}

Para la segunda imagen, vamos a calcular:

645 px/844 px y el valor tiene que multiplicarse por 100, lo que da un 76,4 %. Vamos a redondearlo al 75 %, lo que encaja perfectamente en nuestra cuadrícula de 12 columnas en el CSS.

Debe asegurarse de que la imagen inferior ocupe nueve columnas y comience a renderizarse a través de la cuarta línea de ^cuadrícula . Con esto, la imagen debería ocupar el resto de la cuadrícula.

El código CSS para la imagen en la parte inferior es el siguiente:

.image-stack__item—abajo

{

cuadrícula-columna: 4

fila de cuadrícula: 1; //esto hace que la imagen aparezca en la misma fila

}

Con la cuadrícula CSS, todo tipo de superposición es posible. La superposición puede incluir imágenes sobre imagen, texto sobre imagen o incluso texto superpuesto sobre el texto. Ofrece tantas posibilidades como puedas imaginar. El código final aparece de la siguiente manera:

<div class=”container”> <p>Método de cuadrícula CSS</p> <div class=”image-stack”> <div class=”image-stack__item image-stack__item–top”>

<Img src=”Https//sourceoftheimage.com/s.cdpn.io.110238/image1.jpeg” alt=La primera imagen”></div>

<div class=”image-stack__item image-stack__item–bottom”>

<img src=https://otra-fuente.com/s.cdpn.io/110238/retrato-1-segundaimagen.jpg alt=”segunda imagen”></div>

</div> <p>El contenido del texto va aquí.</p> </div>

2. Flotante con márgenes negativos:

Alfiler

La propiedad flotante de CSS coloca el elemento de la página web en el lado izquierdo o derecho de su contenedor. Permite que el texto y los elementos en línea envuelvan el elemento. Aunque un elemento flotante es parte de la página, aún se saca del flujo normal. Con la propiedad flotante, el elemento se desplaza hacia la derecha o hacia la izquierda para tocar el borde de su elemento contenedor.

La propiedad float hace que los elementos a su alrededor floten. Esta propiedad hace que los elementos y el contenido parezcan similares al diseño de impresión. Tal concepto se llama ajuste de texto. Significa que el texto se envuelve alrededor de los elementos. En el diseño de impresión, el componente podría ser imágenes donde el texto flota a su alrededor. Ignorar el ajuste de texto hace que el texto se superponga a la imagen como si la imagen no estuviera presente. Puede usar flotantes para diseñar el diseño de una página web o sitio web completo. No se limita simplemente a envolver el texto alrededor de los elementos de la página web.

El código aquí será compatible con todos los navegadores, incluido Internet Explorer. Este método se enfoca en sacar los elementos del documento y representarlos usando float. La mejor parte de esta sintaxis de codificación es que la estructura sigue siendo similar a la estructura mencionada anteriormente. Para el elemento principal en la pila de imágenes, usamos "clear", ya que hacemos flotar sus elementos secundarios. Aquí, el contenido se muestra debajo de la imagen. La sintaxis es la siguiente:

.imagen-pila::después

{

Contenido: ' ';

Pantalla: mesa;

Limpia los dos;

}

El código anterior es para la imagen colocada en la parte inferior. Por lo tanto, la segunda imagen irá encima de esta imagen.

Ahora, para la imagen colocada en la parte superior, el siguiente es el código:

.image-stack__item—superior

{

Flotador izquierdo;

Ancho: 66%;

Margen derecho: -100%;

Relleno superior: 15%;

Posición: relativa;

índice z: 1;

}

Tenemos un margen especificado en un valor negativo, lo cual es significativo. El margen negativo se comporta de manera diferente en diferentes situaciones. Si se aplican en la parte superior o inferior, actúan de una manera particular. Y se comportan de manera diferente si el margen negativo está a la izquierda o a la derecha de los elementos flotantes.

Aquí, hemos aplicado el margen derecho negativo en el elemento izquierdo flotante que permite la superposición de la imagen. -100% es el ancho del contenedor de la imagen. Este valor se coloca a la izquierda y permite que la imagen en la parte inferior se represente debajo de ella como si no estuviera en el modelo de objeto del documento. Por lo tanto, el código final aparece así:

{

tamaño de caja: caja de borde;

}

pags {

tamaño de fuente: 20px;

familia tipográfica: sans-serif;

color: #6439a9;

}

.envase {

relleno: 100px 30px;

ancho: 100%;

margen: 0 automático;

ancho máximo: 900px;

}

// arreglo claro

.imagen-pila::después de {

contenido: ' ';

pantalla: mesa;

Limpia los dos;

}

.image-stack__item–top {

flotador izquierdo;

ancho: 66%;

margen derecho: -100%;

acolchado superior: 15%; // arbitrario

posición: relativa;

índice z: 1;

}

.image-stack__item–bottom

{

flotar derecho;

ancho: 75%;

}

imagen

{

ancho: 100%;

}

3. Combinación de métodos CSS grid y float:

Alfiler

Los códigos de este método admiten que funcionen en todos los navegadores. También especifica el código donde funciona perfectamente en navegadores específicos que son antiguos y obsoletos. Aquí, usamos la función "@supports", que es una parte esencial de este método. Es para verificar si el navegador en consideración admite el valor "display: grid". Vamos a utilizar el código compatible con el navegador Internet Explorer antes de utilizar la función "@support" del código.

En la función "@supports", vamos a restablecer el ancho al 100%. Ahora bien, la propiedad de flotación no tiene importancia aquí establecida dth al 100%. ing para agregar el navegador IE en consideración es compatible con anner. Y se comportan de manera diferente, si la m negativa. No va a afectar a los elementos en uso. Por lo tanto, el código final se parece al siguiente:

<div class=”container”> <p>Método de navegación cruzada</p> <div class=”image-stack”> <div class=”image-stack__item image-stack__item–top”> <img src=”https: //firstimagesource.com/s.cdpn.io/110238/image1.jpeg” alt=””> </div> <div class=”image-stack__item image-stack__item–bottom”> <img src=”https:/ /secondimagesource.com/s.cdpn.io/110238/secondImage.jpg” alt=””> </div> </div> <p>El contenido textual va aquí.</p> </div>

Las ventajas de usar rejillas:

Alfiler

La reducción de la codificación es la ventaja esencial de usar grillas CSS. En lugar de generar elementos HTML adicionales para basar su cuadrícula, utiliza una hoja de estilo para crear una cuadrícula. Los marcos de cuadrícula no siempre hacen uso de nombres semánticamente sólidos de la clase. Debido a que una cuadrícula CSS es de naturaleza nativa, no es necesario que incluya grandes bibliotecas en su proyecto para admitirla. El desarrollo web basado en CSS es más rápido porque aprender la sintaxis es fácil. Además, la creación de prototipos con CSS es rápida y eficaz.

Con la creciente compatibilidad de los navegadores, puede usar la cuadrícula prácticamente en todas partes. Los tutoriales para la cuadrícula están disponibles en todas partes; todos, desde principiantes hasta desarrolladores avanzados, pueden usarlo. Una cuadrícula permite una fácil implementación de la interfaz de usuario de una página web en diferentes contextos. Puede crear un diseño receptivo y estructurado sin un ajuste de texto interminable y tener diseños de tres columnas. Una grilla ofrece fácil mantenimiento y flexibilidad para el diseño de la página web. Además, puede trabajar con filas y columnas simultáneamente para generar planes complicados pero flexibles. Como la mayoría de los navegadores son compatibles con el sistema de cuadrícula, no necesita un código de respaldo para que funcione.

Una cuadrícula permite a un diseñador generar un diseño de sitio web que sea creativo y sorprendente. Además, los diseñadores tienen la opción de convertirlo en un diseño receptivo sin comprometer la apariencia general y la estética visual del diseño. CSS combina tanto la cuadrícula como las ideas de diseño del diseñador para generar un diseño listo para usar. Este diseño tiene una apariencia deslumbrante y responde al usuario experto en tecnología de hoy.

Conclusión:

La superposición de imágenes es un concepto apasionante en el mundo del diseño. Cuando un desarrollador tiene que manejar la superposición de las fotos, puede seguir las formas mencionadas. Si está bien versado en CSS, como desarrollador, sabe que es prácticamente posible lograr lo que elija. Pero los principiantes pueden echar un vistazo a este tutorial y hacer que la imagen se superponga en menos tiempo. Debería saber qué código va en qué archivo.