CSS怎么实现文字的渐变

最新推荐文章于 2024-07-01 15:53:36 发布

原创最新推荐文章于 2024-07-01 15:53:36 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#CSS文字渐变 #网页文字渐变

本文介绍如何使用CSS的linear-gradient(), background-clip和text-fill-color属性创建渐变背景并使文字呈现透明效果。通过具体代码示例，展示了从下到上的渐变应用于文字的实现方式。

主要用到3个属性

　linear-gradient() 用来实现渐变的图像

background-clip 知道对象的悲剧图像向外裁剪的区域

text-fill-color 指定文字的填充颜色

例如：

<p><a href="#">某市某某生物科技有限公司</a></p>

<style>
  p > a{
            /*to  top指从下到上的渐变*/
      background: linear-gradient(to top,#33CC99 0%,#006666 100%);
      background-clip: text;
      -webkit-background-clip: text;
      text-fill-color: transparent;
      -webkit-text-fill-color: transparent;
    }
</style>

效果如下：