实现文字渐变色，文字底部背景色

快速实现图中的css样式，

                    <div>
                      <div class="text-bottom-bg move-up">
                        <span class="type">塔筒高度</span>
                      </div>
                      <div class="name">100M</div>
                    </div>

代码如下

代码说明：

要让你的文字上浮一点，你可以使用 transform: translateY() 属性来调整文字的位置。translateY(-5px) 让文字上浮 5px，具体的上浮距离可以根据你的需要调整。

    .text-bottom-bg {
      background: linear-gradient(
        90deg,
        rgba(89, 182, 249, 0) 6%,
        #59b6f9 49%,
        rgba(89, 182, 249, 0) 97%
      );
      border-radius: 0px 0px 0px 0px;
      opacity: 0.81;
      color: #ffff;
      .type {
        display: inline-block; /* 确保文本为行内块元素 */
        transform: translateY(-7px); /* 文字上浮 5px，可以根据需要调整 */
      }
    }

    .name {
      font-family: PangMenZhengDao-3, PangMenZhengDao-3;
      font-weight: 400;
      font-size: 20px;
      background: linear-gradient(90deg, #6bdcff 0%, #f1fffc 100%);
      -webkit-background-clip: text;
      background-clip: text;
    }

 

如果要是现实文字渐变色，并且渐变色只显示在文字上，还需要配合 

-webkit-background-clip: text;

background-clip: text;这两个属性