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

在本文中，我们将学习如何在 Bootstrap 中正确使用图像叠加。但在此之前，首先我们需要知道什么是图像叠加。

图像叠加：图像叠加通常是指图像作为背景图像并在该图像内插入文本、链接。 可以使用引导程序中存在的“card-img-overlay”属性来完成。我们也可以使用普通的 CSS 和引导主题来完成。今天我们将学习这两种技术来理解财产。

示例 1：在引导程序中使用“card-img-overlay”属性。

首先，我们需要所有必要的引导 CDN 来执行操作。为了获得这些，人们可以简单地访问他们的网站并将链接复制到他们的代码。 CDN 的链接如下：

https://getbootstrap.com/docs/5.0/getting-started/introduction/

从那里，将所有 CSS 和 JS 文件复制到您的代码中。

代码：

HTML

  

    
  
    
    
      
    
        .card {
            width: 270px;
            height: 400px;
            padding: 5px;
        }
  
        h1 {
            color: green;
            text-align: center;
        }
  
        img {
            height: 140px;
        }
  
        .container {
            margin-top: 50px;
            width: 600px;
            height: auto;
        }
    

  

    
        
            GeeksforGeeks
            
                
                
                    
                        Image Card Overlay
                    
                      
                    
                        Link
                        
                          
                        Geeks
                    
                
                  
                Card link
            
        
    

  

输出：

在输出中，文本和链接在图像内正常工作，因此演示了图像叠加功能。

示例 2：（仅使用 CSS 而不使用 Bootstrap 类）：在此示例中，我们将使用 CSS 演示图像叠加，而引导程序将包含在代码中。但是在编写代码之前，我们必须包含引导 CDN，以便在我们的网站上获得引导效果。

代码：

HTML

  

    With CSS
    
  
    
    
      
    
    
      
    
    
      
    
        h1 {
            color: green;
        }
  
        .images img {
            padding: 10px;
        }
  
        .col {
            position: relative;
            width: 200px;
            height: 200px;
        }
  
        .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.6;
        }
    

  

    
        GeeksforGeeks
        
              
            
                
                
                    Oct 30, 2020
                
            
        
    

  

输出：

悬停前：

悬停后：