如何正确使用Bootstrap中的图片叠加效果？

图片叠加是一种属性，通过使用它我们可以在图片上显示任何文本、图像、链接等等。它允许我们在图片上设置文本、图像或其他内容，使其看起来很漂亮。我们可以使用Bootstrap中定义的图片叠加类 card-img-overlay 。这个类允许我们在图片上写入文本或对齐文本，并将图片作为文本或链接的背景。

使用这个类有哪些优势？

它允许您在图片上编写或对齐文本和链接，使其看起来像是它们的背景图片。
您可以使用图标或一些文本来显示用户悬停时的图像详细信息。
您还可以在具有Bootstrap的图片叠加类的图片上放置一个图像。

使用card-img-overlay类

以下语法将向您展示如何使用card-img-overlay类与一个元素重叠其他元素-

<div class = "card">
   <img class = "card-img-top" src = "" alt = "">
   <p class = "card-img-overlay"></p>
</div>

让我们通过在代码示例中实际实现它并查看它的实际用途来详细了解它。

步骤

步骤1 - 在第一步中，我们将定义一个包含整个HTML代码或我们将使用图像叠加类的元素的容器。
步骤2 - 在下一步中，我们将定义一个带有名为 card 的类的

元素，该元素将在网页上形成一个卡片。

步骤3 - 在最后一步中，我们将定义一个带有名为 card-img-top 类的< img>元素和另外两个元素，一个带有简单文本，另一个带有一个锚点标签来显示一个空链接。

示例

下面的示例将解释如何使用Bootstrap正确地将图像覆盖属性与图像上的内容叠加

<!DOCTYPE html>
<html>
<head>
   <!-- Bootstrap CSS CDN link included here -->
   <link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel = "stylesheet">
</head>
<body>
   <div class = "container">
      <center>
         <h2> Using image overlay correctly with Bootstrap </h2>
         <p> The text over the below image is coming by using the "card-img-overlay" class. </p>
         <div class = "card w-40 d-block mx-auto">
            <img style = "height: 300px; width: 300px;" class = "card-img-top" src = " https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1GyK6fiCHCRcizXh_dXsFBA5Idw7XayKizQ&usqp=CAU " alt = "Tutorialspoint Logo">
            <p class = "card-img-overlay text-center"> This is the overlay text. </p>
            <a class = "card-img-overlay text-center pt-5" href = "#"> This is the overlay link. </a>
         </div>
      </center> 
   </div>
</body>
</html>

在上面的例子中，我们使用了 card-img-overlay 类和我们希望放在图像上方的元素，或作为图像的叠加文字。这个类会将元素设置在图像上方，看起来像是文字的背景图像。

让我们再看一个代码示例，看看如何在叠加元素中使用图像叠加类，比如图标。

这个例子的算法和上面的例子几乎一样，只需要将包含图像叠加类的元素更改为其他的字体图标元素即可。

示例

以下示例将演示如何在不包含文本内容而包含图标的元素中使用图像叠加类 –

<html>
<head>
   <!-- Bootstrap CSS CDN link included here -->
   <link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel = "stylesheet"></head>
      <!-- Font Awesome script CDN is included here -->
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" ></script>
<body>
   <div class = "container">
      <center>
         <h2> Using image overlay correctly with Bootstrap </h2>
         <p> The text and the fontawesome icon over the below image is coming by using the "card-img-overlay" class. </p>
            <div id = "my-card" class = "card w-40 d-block mx-auto">
               <img style = "height: 150px; width: 300px;" class = "card-img-top" src = "https://www.tutorialspoint.com/cg/images/logo.png" alt = "Tutorialspoint Logo">
               <p class = "card-img-overlay text-center"> This is the overlay text. </p>
               <i id = "icon" class = "fas m-auto card-img-overlay text-center fa-search-plus"></i>
               <a class = "card-img-overlay text-center pt-5" href = "#"> This is the overlay link. </a>
            </div>
      </center> 
   </div>
   <script>
      var card = document.getElementById('my-card');
      card.addEventListener('mouseover', function (){
         card.style.opacity = "0.5";
      });
      card.addEventListener('mouseout', function (){
         card.style.opacity = "1";
      });
   </script>
</body>
</html>

在这个例子中，我们使用文本和链接作为覆盖内容，还使用了Font Awesome图标作为覆盖内容，该图标作为中间图片上方的放大图标可见。通过在Bootstrap中使用图像覆盖类，您可以使用不同类型的内容作为图像的覆盖内容。

在本文中，我们正确地使用了图像覆盖类，并使用图像作为文本、链接和图标的背景图像。通过两个不同的代码示例，我们已经看到并理解了它的实际实现。在前一个示例中，我们使用简单的文本和链接作为覆盖内容。而在后一个示例中，我们将文本、链接以及Font Awesome图标作为图像的覆盖内容。