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

快速实现图中的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;这两个属性

比如我要实现这个文字渐变效果：

 

<span class="button-text">生成式AI</span>

.button-text {
  font-size: 16px; /* 设置文字大小 */
  font-weight: bold; /* 设置文字粗细 */
  background: -webkit-linear-gradient(left, #4facfe 0%, #00f2fe 100%); /* 渐变效果 */
  -webkit-background-clip: text; /* 将背景剪裁为文字形状 */
  -webkit-text-fill-color: transparent; /* 使文字颜色透明，显示背景 */
  display: inline-block; /* 使元素以行内块级元素显示 */
}