可视化驾驶舱title实现字体渐变和字体颜色叠加效果

html：

<div class="title" data-text="可视化驾驶舱标题">可视化驾驶舱标题</div>

css

.title {
    position: relative;
    line-height: 90px;
    font-family: PangMenZhengDao;
    font-size: 52px;
    text-align: center;
    letter-spacing: 10px;
    color: #fff;
    opacity: 0.86;

    &::before,
    &::after {
        content: attr(data-text);
        position: absolute;
        left: 0;
        inset: 1;
        width: 100%;
        height: 100%;
        background: -webkit-linear-gradient(to bottom, #fff 32%, #245398);
        background: linear-gradient(to bottom, #fff 32%, #245398);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-text-fill-color: transparent;
        text-fill-color: transparent;
    }
}

可实现渐变色和纯色背景叠加的效果，一下是白色和linear-gradient(to bottom, #fff 32%, rgba(36, 83, 152))的叠加效果