这里面先定义一个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>下面是JScreated() {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的位置到底部是黑色的。
这样就可以实现从上到下三分之一半透明灰色，渐变到三分之二遮挡的效果
