📌  相关文章
📜  如何将文本放在创建的图标中?

📅  最后修改于: 2021-11-07 08:48:42             🧑  作者: Mango

任务是将文本放入创建的图标中。这篇文章将介绍一些不同的方式,您可以通过这些方式在创建的图标/图像的内部/之上放置文本。所有讨论的解决方案都遵循基于相同基本思想的不同呈现,即在图像/图标上书写/放置文本,使用分割使图像/图标成为背景图像/图标,然后写入文本。

  • 解决方案1:
    
    
         
        
            
      
            
                             
                    

    Programming

                    

    Geeks For Geeks

                
            
                    

    输出:

    说明:使用 .container 分割,我们将图像作为背景图像,然后使用样式 .text-block 分割,我们制作一个带有文本的框并将其放置在绝对位置(该值告诉浏览器无论将是什么应从文档的正常流程中删除定位,而是将其放置在页面上的确切位置)并使用 CSS 使用首选样式。

  • 解决方案2:
    
    
         
        
            
      
            
                             
                    

    Heading

                    

    Geeks For Geeks

                
            
                    

    输出:

    说明:使用与上面相同的方法,但不是创建文本框,而是在这种方法中将内容覆盖在图像/图标上,而是使用 CSS 简单地调整分区的宽度属性,即设置“width: 100%;”使文本覆盖图像/图标的整个宽度。

  • 解决方案 3:将鼠标悬停在图像上
    
    
         
        
            
      
            
                             
    Geeks For Geeks
            
                    

    输出:
    原来的:

    悬停时:

    说明:在此解决方案中,我们将图像/图标设为背景图像/图标,并将文本覆盖在图像上作为上述解决方案,但使用“opacity : 0;”使文本/内容消失。在 .overlay 分区中设置样式,当用户将鼠标悬停在图像上时,我们再次使用“opacity: 1;”设置可见的不透明度。