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

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

图像叠加层：图像叠加层通常是指该图像是背景图像，并在该图像内部插入文本，链接。 可以使用引导程序中存在的‘card-img-overlay’属性来完成此操作。我们也可以使用普通的CSS和bootstrap主题来做到这一点。今天，我们将学习两种了解属性的技术。

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

  

输出：

悬停之前：

悬停后：