css渐变色半透明半遮挡，动态控制高度线性渐变效果

这里面先定义一个div可以固定写死高度，就很简单了，但是下面在项目中div的高度不是写死的，直接看代码

<div id="shadow-box">
这是内容
这是内容
这是内容
<div id="occlusion-box">
<div id="btn-text">
     <div @click="paidUnlocking">付费解锁查看完整报告></div>
     <div class="unlock">
     <div><van-button round type="info" color="#47B3AA">保存图片       </van-button></div>
     <div><van-button round type="info">发送至邮箱</van-button></div>
      </div>
    </div>
</div>
</div>
下面是JS
 created() {
    this.$nextTick(function () {
    //DOM更新后执行函数
      this.getHeight();
    });
  },
methods:{
  getHeight() {
      let div = document.getElementById("shadow-box");
      var h = div.offsetHeight;
      let num;
      if (h !== "") {
        num = parseInt(Number((h * 2) / 3));//遮挡三分之二元素，根据需求来计算
        // console.log(num);
        let masks = document.getElementById("occlusion-box");
        masks.style.height = num + "px";//计算后的高度赋值给遮挡盒子
        if (masks !== "") {
          let tes = document.getElementById("btn-text");
          let her = Number(num / 2);
          tes.style.marginTop = her + "px";
        }
      } else {
        return;
      }
    },
}

 <style lang="scss" scoped>
 //CSS样式
 .details_page {
  position: relative;
  #pay_btn {
    position: absolute;
    z-index: 100;
    width: 100%;
    bottom: 0px;
    //下面这个样式是重点
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.8) 33.33%,
      #ffffff 33.33%,
      #ffffff 100%
    );
}
 </style>

实现的效果

CSS样式：background这里使用了linear-gradient函数，设置了渐变的方向为从上到下（to bottom），并设置了三个颜色点。

第一个颜色点为半透明的灰色，使用rgba()函数来设置，其中前三个参数是灰色的RGB值，最后一个参数是透明度，这里设置为0.5，表示半透明。位置为33.33%，表示从顶部开始到1/3的位置是半透明的灰色。
第二个颜色点为黑色，位置也为33.33%，表示从顶部开始到1/3的位置是半透明的灰色，从1/3的位置到底部是黑色的。
第三个颜色点也是黑色，位置为100%，表示从1/3的位置到底部是黑色的。
这样就可以实现从上到下三分之一半透明灰色，渐变到三分之二遮挡的效果