CSS:文字渐变色/文字任意方向渐变色/图片纹理文字等效果

帅比九日

已于 2022-05-24 13:25:35 修改

阅读量1k

点赞数

于 2020-04-30 17:41:51 首次发布

本文链接：https://blog.csdn.net/qq_41883423/article/details/105865349

版权

踩过的坑专栏收录该内容

156 篇文章 7 订阅

订阅专栏

直接上代码：
纵向渐变文字：

 <p class="tt">嗷嗷嗷嗷嗷</p>
 /******************************************/
 <style>
        .tt{
            background-image: linear-gradient(red,green);//背景色渐变，默认从上到下
            -webkit-background-clip: text;//CSS3属性：设定背景的绘制范围为文字
            color: transparent;//将字的颜色设置透明，只露出背景色
        }
    </style>

效果：
在这里插入图片描述
实际上我们实现的是：背景色渐变+背景绘制文字区域+文字透明；来实现文字渐变，本质上我们看到的是背景而不是文字；由此：只要我们设置想要的背景纹理，则可以实现各种花哨的文字样式。↓↓↓↓↓↓↓↓↓↓↓↓↓
任意方向渐变文字：
代码：

 <p class="tt">嗷嗷嗷嗷嗷</p>
 /******************************************/
 <style>
        .tt{
            width: 500px;
            background-image: linear-gradient(to right , #7A88FF, #7AFFAF);//在这里设置方向与颜色，则可以实验任意方向的文字渐变色效果实现。
            -webkit-background-clip: text;//CSS3属性：设定背景的绘制范围
            color: transparent;//将字的颜色设置透明，只露出背景色
        }
    </style>

效果：
在这里插入图片描述

图片纹理文字：
代码：

 <p class="tt">嗷嗷嗷嗷嗷</p>
 /******************************************/
 <style>
        .tt{
            background: url('../images/adv.jpg') no-repeat;//将图片设为背景
            -webkit-background-clip: text;//CSS3属性：设定背景的绘制范围
            color: transparent;//将字的颜色设置透明，只露出背景色
        }
    </style>