background-image: linear-gradient 背景图渐变

<style lang="less">

.left-page {

  .left-page-inner {

    .common-header-title {

      font-size: 30px;

      font-family: ZhenyanGB, ZhenyanGB-Regular;

      font-weight: 400;

      text-align: left;

      background-color: #b4dffc;

      background-image: linear-gradient(180deg, #edf7fe 0%, #b4dffc 100%);

      background-clip: text;

      -webkit-text-fill-color: transparent;

      letter-spacing: 2px;

      padding-bottom: 8px;

      border-bottom: 2px solid #314751;

    }

  }

}

</style>

<style lang="less" scoped>

.left-page {

  width: 1343px;

  height: 1080px;

  position: absolute;

  top: 0px;

  z-index: 2;

  .left-page-bg {

    position: absolute;

    width: 1343px;

    height: 1080px;

    & > div {

      display: inline-block;

      vertical-align: top;

    }

    .left-opaque {

      width: 800px;

      height: 1080px;

      background-color: rgba(19, 23, 27, 1);

    }

    .left-translucent {

      width: 542px;

      height: 1080px;

      background-color: rgba(19, 23, 27, 0); /* 不支持线性的时候显示 */

      background-image: linear-gradient(

        to right,

        #13171b,

        rgba(19, 23, 27, 0.95),

        rgba(19, 23, 27, 0.9),

        rgba(19, 23, 27, 0.85),

        transparent

      );

    }

  }

  .left-page-inner {

    position: absolute;

    padding-top: 142px;

    margin: auto 30px;

    display: flex;

  }

  .change-left-page-show {

    position: absolute;

    top: 50%;

    right: -70px;

    .change-box {

      cursor: pointer;

      .img {

        pointer-events: none;

        img {

          width: 32px;

          height: 49px;

        }

      }

      .label {

        pointer-events: none;

        font-size: 28px;

        font-family: Source Han Sans CN, Source Han Sans CN-Medium;

        font-weight: 500;

        text-align: left;

        color: #67e3ec;

        writing-mode: vertical-lr;

      }

    }

  }

}

</style>