📜  如何使用引导程序将黑色悬停添加到图像?

📅  最后修改于: 2021-05-25 16:19:24             🧑  作者: Mango

Bootstrap是一个流行的CSS框架,前端开发人员广泛使用它来为Web应用程序创建交互式UI。 Bootstrap因其简单易用而被广泛使用。 BootStrap允许多个实用程序使图像具有交互性。这些实用程序之一可以将鼠标悬停在上面时更改图像的颜色。悬停基本上是将光标移到图像上。下面的代码段演示了如何使用引导程序向图像添加黑色悬停。

第一种方法:
在此方法中,内容叠加层类指定了鼠标悬停在图像上时所需的图像属性。当用户将鼠标悬停在content-overlay类上时,background属性指定图像的不透明度。 content-details类指定一组属性,这些属性用于当鼠标悬停在图像上方时显示在图像顶部的内容。
例子:



    
        
        
        
        
    
    
        
            
                
                                 
                    

                      Workstation

                    

                      Hover out to view image

                
            
        
    

输出:

替代方法:
第二种方法也处理悬停效果,但是这里的悬停不透明度设置为1,这意味着基础图像被完全隐藏。 overlay类包含悬停时图像的一组规范。背景颜色设置为黑色。过渡时间和性质也已设定。
例子:



    
        
        
        
    
    
        

Adding black color to image            using the overlay class

        

Hover over the image to see the effect.

           
                         
                
Click to view image
            
        
    

输出: