Vue3中使用Vanta时如何为其底层canvas添加线性渐变透明效果

方案1：使用带前缀的CSS mask属性（实现真正的透明淡出） #

你之前测试mask属性失效大概率是没有添加浏览器私有前缀，目前Chromium内核浏览器都需要添加-webkit-前缀才能让mask属性生效，该属性会作用于容器内部所有渲染内容，包括Vanta生成的canvas元素。

参考代码如下：

<template>
  <div class="vanta-wrapper">
    <v-vanta :effect="effect" />
  </div>
</template>

<style scoped>
.vanta-wrapper {
  width: 100%;
  height: 100vh;
  position: relative;
  /* 从上到下70%的位置开始淡出，到底部完全透明 */
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}
</style>

如果需要修改淡出方向和位置，调整linear-gradient的参数即可。

方案2：叠加渐变遮罩层（全浏览器兼容） #

如果需要兼容不支持mask属性的旧浏览器，可以在Vanta容器上叠加一层渐变伪元素，用和底层背景同色的渐变模拟淡出效果，注意要设置pointer-events: none避免遮罩层阻挡页面交互。

参考代码如下：

<template>
  <div class="vanta-wrapper">
    <v-vanta :effect="effect" />
    <div class="page-content">
      <!-- 你的页面内容放在这里 -->
    </div>
  </div>
</template>

<style scoped>
.vanta-wrapper {
  width: 100%;
  height: 100vh;
  position: relative;
}
.vanta-wrapper > canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
/* 渐变遮罩 */
.vanta-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  /* 渐变终点颜色和页面底层背景色保持一致即可 */
  background: linear-gradient(to bottom, transparent 70%, #fff 100%);
  pointer-events: none;
}
.page-content {
  position: relative;
  z-index: 2;
}
</style>

如果需要实现滚动时动态淡出的效果，只需要监听滚动事件，动态修改linear-gradient的参数值即可。

内容的提问来源于stack exchange，提问作者Sensei