En este artículo, aprenderemos cómo usar la superposición de imágenes correctamente con Bootstrap . Pero antes de eso, primero, necesitamos saber qué es una superposición de imágenes.
Superposición de imágenes: la superposición de imágenes generalmente se refiere a que la imagen es una imagen de fondo e inserta textos y enlaces dentro de esa imagen. Se puede hacer usando la propiedad ‘ card-img-overlay ‘ que está presente en bootstrap. Además, podemos hacerlo con CSS normal junto con un tema de arranque. Hoy estaremos aprendiendo las dos técnicas para entender la propiedad.
Ejemplo 1: uso de la propiedad ‘card-img-overlay’ en bootstrap.
Primero, necesitamos el CDN de arranque necesario para usar los componentes de arranque. Para obtenerlos, uno puede simplemente ir a su sitio web y copiar los enlaces a su código. El enlace a los CDN se proporciona a continuación:
https://getbootstrap.com/docs/5.0/getting-started/introduction/
Desde allí, copie todos los archivos CSS y JS a su código.
Código:
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity=
"sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous">
<style>
.container {
margin-top: 50px;
width: 100%;
}
.card {
width: 270px;
height: 250px;
padding: 5px;
}
h1 {
color: rgb(36, 168, 36);
text-align: center;
}
img {
height: 175px;
}
</style>
</head>
<body>
<div class="container">
<center>
<h1>GeeksforGeeks</h1>
<div class="card">
<img class="card-img-top" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png">
<div class="card-img-overlay card-inverse">
<h4 class="text-stroke text-white pb-5">
Image Card Overlay
</h4>
<div class="card-block pt-5">
<a href="#" class="card-link text-white">Link
</a>
</div>
</div>
<a href="#" class="card-link pt-3">Card link</a>
</div>
</center>
</div>
</body>
</html>
Producción:
En la salida, el texto y el enlace funcionan correctamente dentro de la imagen y, por lo tanto, se demuestra la función de superposición de imágenes.
Ejemplo 2: (Usando solo CSS sin usar la clase Bootstrap): En este ejemplo, demostraremos la superposición de imágenes usando CSS mientras que Bootstrap se incluirá en el código. Pero antes de escribir el código, debemos incluir los CDN de arranque para obtener el efecto de arranque en nuestro sitio web.
Código:
HTML
<!DOCTYPE html>
<html>
<head>
<title>With CSS</title>
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<style>
h1 {
padding-top: 10px;
color: rgb(36, 168, 36);
}
.col {
position: relative;
width: 200px;
height: 225px;
}
.overlay {
position: absolute;
color: white;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: green;
}
.col:hover .overlay {
opacity: 0.7;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<div class="d-flex
justify-content-center images">
<div class="col">
<a href="#"><img src="https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png" alt="d"></a>
<div class="overlay">
<div class="text pt-2">
<h4>Image Overlay</h4>
</div>
</div>
</div>
</div>
</center>
</body>
</html>
Producción:
HTML es la base de las páginas web y se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
CSS es la base de las páginas web y se utiliza para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .