css设置文字渐变色

css文字渐变色

设置class="text"的文字渐变色。

主要使用 background-clip: text;-webkit-background-clip: text; 这两个属性来实现文字的渐变

    文字渐变

1.普通渐变。

2.设置颜色终止位置的渐变。

3.多个颜色分明的渐变。

设置两个颜色的终止位置相同来设置文字左右两部分不相同的颜色。

.text {
    background: linear-gradient(to right, #ff0000 50%, #0000ff 50%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

设置一个颜色的起始位置和终止位置来设置文字各部分不相同的颜色。

4.也可使用背景图片作为文字的前景色。

.box {
    background-image: url('./testbak.jpeg');
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-size: 68px;
    font-weight: bold;
}

注：该效果可能存在兼容性问题。可在https://caniuse.com查询兼容性问题。