📌  相关文章
📜  使用 HTML 和 CSS 创建渐变文本效果

📅  最后修改于: 2021-11-08 02:30:26             🧑  作者: Mango

本文将展示使用 background-clip CSS 属性在文本上添加渐变效果的方法。使用此效果的最终文本输出如下所示。将使用的 CSS 属性是flexboxbackground-clip-webkit-background-clip以及背景

HTML 部分:此部分包含 HTML 标记,该标记将包含必须设置样式的文本。文本已包含在容器 div 中,这是一种很好的做法,并有助于将其置于页面的中心。类渐变也已添加到文本中。本节不需要更复杂的东西。

HTML


  

    CSS Text Gradient

  

    
        

            Happy Halloween         

    
  


CSS


CSS


HTML


  

    CSS Text Gradient
  
    

  

    
        

            Happy Halloween         

    
  


CSS 部分: CSS 部分将包含使用渐变效果的文本样式。一种名为Metal Mania 的google 字体用于为其提供所需的效果。我们将首先重置 CSS 中的所有内容,这是一个很好的做法。接下来将导入并使用要使用的 Google 字体。我们还将使用 flexbox 属性将所有内容居中。

CSS


创建渐变效果:我们将开始制作主要渐变效果。逻辑是为文本设置了线性渐变背景。然后背景被剪裁到文本的大小。剪切后,文本颜色设置为透明。

inline-block属性将使背景与标题文本的大小相同。带有文本值的background-clip属性将允许我们将线性渐变背景剪辑到文本。 -webkit前缀版本用于使其具有故障安全性。使文本颜色透明只会显示线性渐变背景。

CSS


完整代码:

HTML



  

    CSS Text Gradient
  
    

  

    
        

            Happy Halloween         

    
  

输出: