📌  相关文章
📜  如何使用 CSS 将文本用作背景？

📅  最后修改于: 2021-08-31 07:35:12             🧑  作者: Mango

有一些网站设计需要使用文本作为背景。这可以通过使用以下方法通过 CSS 轻松实现。

  • 在相对定位元素内使用绝对定位元素：在相对定位元素内使用绝对定位元素，绝对元素具有较低的 z-index 值，使文本显示为背景。

    例子： 

    

  

    
        Using text as background with CSS
    
  
    

  

    
    
        
    
            Background Text
        
    
        
    Foreground text
    
        
    Welcome to GeeksforGeeks
    
        
    Start Learning
    
    
    

  

    输出：

  • 使用 :after 伪元素：使用 :after 伪元素和:after具有较低 z-index 值的伪元素使其显示为背景。在 :after 伪元素中使用文本使文本显示为背景。

    例子： 

    

  

    
        Using text as background with CSS
    
  
    

  

    
    
        
    Foreground text
    
        
    Welcome to GeeksforGeeks
    
        
    Start Learning
    
    
    

  

    输出：

  • 使用 :before 伪元素：使用 :before 伪元素和:before 伪元素具有较低的 z-index 值使其显示为背景。在 :before 伪元素中使用文本使文本显示为背景。

    例子： 

    

  

    
        Using text as background with CSS
    
  
    

  

    
    
        
    Foreground text
    
        
    Welcome to GeeksforGeeks
    
        
    Start Learning
    
    
    

  
       

    输出 ：