如何将文本放在创建的图标中？

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

• 解决方案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;”设置可见的不透明度。