字体颜色设置 ---- 渐变背景、图片背景等

重点：   -webkit-background-clip: text; 规定背景绘制区域（背景可以是颜色、图片、动图、视频）

1、渐变背景字体

• 默认渐变方向

<template>
    <div class="default">默认渐变</div>
</template>


<style>
    .default{
        background: linear-gradient(red, yellow, blue);
        -webkit-background-clip: text;   
        color: transparent;
    }
</style>

• 自定义渐变方向

​
<template>
   <div class="to_top">自下向上线性渐变</div>
</template>


<style>
    .to_top{
        background: linear-gradient(to top, red, yellow, blue);
        -webkit-background-clip: text;
        color: transparent;
    }
</style>

​

2、图片背景字体

<template>
    <div class="img_font">
        <div>图片作字体背景</div>
        <div>图片作字体背景</div>
        <div>图片作字体背景</div>
    </div>
</template>

<style>
    .img_font{
        font-size: 150px;
        font-weight: 900;
        width: 100%;
        height: 100%;
        background-image: url("../../assets/img/test.jpg");
        background-size: 100% 100%;   /* 视需求设置，可不设置 */
        -webkit-background-clip: text;
        color: transparent;
    }
</style>

3、动图背景字体

​
<template>
    <div class="img_font">
        <div>图片作字体背景</div>
        <div>图片作字体背景</div>
        <div>图片作字体背景</div>
    </div>
</template>

<style>
    .img_font{
        font-size: 150px;
        font-weight: 900;
        width: 100%;
        height: 100%;
        background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171218%2F504f213370e847b0aec4f9973f487dd8.gif&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627027975&t=ab1c1fa03da04b7c4c71ff874401b173");
        background-size: 100% 100%;   /* 视需求设置，可不设置 */
        -webkit-background-clip: text;
        color: transparent;
    }
</style>

​

4、视频背景字体 （同上、替换background-image 地址为视频地址即可）

5、阴影字体

​
<template>
    <div class="shadow_font">阴 影 字 体</div>
</template>

<style>
    .shadow_font{
        text-shadow: 5px 5px 5px #FF0000;
    }
</style>

​

注: 本章所有属性 Internet Explorer 9 以及更早版本的浏览器不支持。