如何在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>

输出:

如何在Bootstrap中正确使用图像叠加？

在输出中，文本和链接在图像中正常工作，因此图像覆盖功能得到了证明。

例子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>

输出:

如何在Bootstrap中正确使用图像叠加？