如何在Bootstrap中正确使用图像叠加
在这篇文章中，我们将学习如何在Bootstrap中正确使用图片叠加。但在这之前，我们首先要知道什么是图像叠加。
图像叠加：图像叠加通常是指将图像作为背景图像，并在该图像中插入文本和链接。它可以使用bootstrap中的’card-img-overlay‘属性来完成。另外，我们也可以用普通的CSS和bootstrap主题来做。今天我们将学习这两种技术来理解这个属性。
例子1：在bootstrap中使用‘card-img-overlay’属性。
首先，我们需要必要的bootstrap CDN来使用bootstrap组件。为了获得这些，可以简单地去他们的网站，复制他们的代码链接。下面提供了CDN的链接。
https://getbootstrap.com/docs/5.0/getting-started/introduction/
从那里，复制所有的CSS和JS文件到你的代码。
代码:
<!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>
输出:
在输出中，文本和链接在图像中正常工作，因此图像覆盖功能得到了证明。
例子2：（只使用CSS，不使用Bootstrap类）：在这个例子中，我们将使用CSS演示图像叠加，同时代码中会包含bootstrap。但在写代码之前，我们必须包括bootstrap CDNs，以便在我们的网站上获得bootstrap效果。
代码:
<!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>
输出:
HTML是网页的基础，通过构造网站和网络应用程序来进行网页开发。你可以通过学习这个HTML教程和HTML例子，从基础开始学习HTML。
CSS是网页的基础，通过对网站和网络应用进行样式设计，用于网页开发。你可以通过学习这个CSS教程和CSS实例，从基础开始学习CSS。
版权声明:本页面内容旨在传播知识，为用户自行发布，若有侵权等问题请及时与本网联系，我们将第一时间处理。E-mail:284563525@qq.com
