如何在Bootstrap 4中使用card-img-overlay类上的链接？

当我们将任何链接放入引导卡内时，它的性能都很好，直到我们使用card-img-overlay将图像作为该卡的背景放置为止。

• Bootstrap卡： BootStrap 4中的卡是灵活且可扩展的内容容器。它包括页眉，页脚，内容，颜色，链接等的选项。
• 卡片图像叠加层： card-img-overlay用于将图像设置为卡片的背景图像，并在图像上添加文本。
  语法：用于卡片覆盖

  
   
   
  
    
  ....
   
  

方法：放置在class card-img-overlay类中的所有链接都有效，但是放置在此类之外的链接不起作用。为了使这些链接有效，请将这些链接的位置设置为“相对”。

CSS代码：将其放在        

        

GeeksforGeeks

        

                         

                

GeeksforGeeks

            

            

                Card link                 

A Computer Science Portal

            

            

                Card link is working             

        

           

                         

                

GeeksforGeeks

            

            

                Card link                 

A Computer Science Portal

            

            

                Card link is not working             

        

    

  

输出：

示例2：此示例说明了card-img-overlay卡，在第一张卡中，我们未使用card-img-overlay，但是当使用card-img-overlay时，链接有效，文本也表现为文本。

• 程序：

    
  
      Bootstrap Card
      
      
      
      
      
      
      
      
      
      
         .card-link{
           position:relative;
          }
          .card {
              width: 250px;
              height: 300px;
              border: 2px solid black;
              padding: 5px;
          }
    
           
    
          h1 {
              color: green;
              text-align: center;
          }
            
          img {
              height: 120px;
          }
            
          .left {
              float: left;
          }
            
          .right {
              float: right;
          }
            
          .container {
              margin-top: 50px;
              width: 600px;
              height: auto;
          }
            
      
  
    
  
      
          GeeksforGeeks
          
              
              
                  GeeksforGeeks
              
              
                  Card link
                  A Computer Science Portal
              
              
                  Card link is working
              
          
    
          
              
              
                  GeeksforGeeks
                  
                      Card link
                      A Computer Science Portal
                  
              
              Card link
              
                  Card link is  working
              
          
      
  
    
                      

• 输出：

注意：在第二个示例中，由于文本不在card-link div中，因此静音文本不会像文本一样显示。