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

📅  最后修改于: 2021-11-10 04:24:16             🧑  作者: Mango

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

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

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

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

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

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

代码:

HTML


  

    
  
    
      
    

  

    
        
            

GeeksforGeeks

            
                                 
                    

                        Image Card Overlay                     

                                           
                        Link                                                                             

Geeks

                    
                
                                   Card link             
        
    
  


HTML


  

    With CSS
    
  
    
      
    
      
    
      
    

  

    
        

GeeksforGeeks

        
                           
                d                 
                    
Oct 30, 2020
                
            
        
    
  


输出:

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

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

代码:

HTML



  

    With CSS
    
  
    
      
    
      
    
      
    

  

    
        

GeeksforGeeks

        
                           
                d                 
                    
Oct 30, 2020
                
            
        
    
  

输出:

悬停前:

悬停后: