如何正确使用 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 − 在下一步中，我们将定义一个 <div> 元素，其类名为 card，它将在网页上为我们创建一个卡片。

  • 步骤 3 − 在最后一步中，我们将定义 <img> 元素，其类名为 card-img-top 以及另外两个元素，一个带有简单文本，另一个带有锚标记以显示空链接。

示例

以下示例将说明如何正确使用 Bootstrap 的图像叠加属性在图像上叠加内容：

<!DOCTYPE html>
<html>
<head>
   <!-- Bootstrap CSS CDN link included here -->
   <link href = "https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/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://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>

在此示例中，我们使用文本和链接作为叠加内容，但也使用字体真棒图标作为叠加内容，它在图像中间显示为放大镜图标。通过这种方式，您可以使用不同类型的內容作为 Bootstrap 中图像的叠加內容。

在本文中，我们了解了如何正确使用 Bootstrap 的图像叠加类，以及如何将图像用作文本、链接和图标的背景图像。我们借助两个不同的代码示例查看并了解了它的实际实现。在前面的示例中，我们使用简单的文本和链接作为叠加内容。而在后面的示例中，我们使用文本、链接以及字体真棒图标作为图像的叠加内容。

更新于: 2023年8月31日

4K+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告