如何使用伪元素与mask-image实现适配任意背景的滚动淡出效果？

原代码的问题 #

你的代码无法生效主要有三个原因：

• 父元素.faded未设置position: relative，导致伪元素的absolute定位相对于视口而非父元素，无法正确覆盖内容。
• 伪元素的content属性错误设置为"''"，会生成多余文本，应该设为空字符串''。
• 你给伪元素添加了mask-image，但伪元素本身无背景或内容，mask无法起到作用——mask是控制元素自身可见性，而非影响下方内容。

方案一：直接使用mask实现（推荐，适配任意背景） #

这种方式无需伪元素，直接给内容容器添加mask属性，就能让内容实现渐变透明，完全适配任意背景色：

<style>
  .faded {
    width: 100px;
    position: relative;
    /* 核心：mask实现内容从下往上淡出，前50%完全可见，后50%渐变为透明 */
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    /* 可选：内容超出容器时开启溢出隐藏 */
    overflow: hidden;
  }
</style>

<div class="faded">Blablabla babalbalbalba balblablablal</div>

方案二：使用伪元素实现（满足你指定的伪元素需求） #

如果必须用伪元素，可以将内容通过伪元素承载，再给伪元素添加mask实现淡出效果，同样适配任意背景：

<style>
  .faded {
    width: 100px;
    position: relative;
    /* 隐藏原内容，让伪元素显示文本 */
    color: transparent;
  }

  .faded::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    color: #000; /* 文本颜色可自定义 */
    /* 给伪元素添加mask，实现内容渐变透明 */
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  }
</style>

<div class="faded" data-text="Blablabla babalbalbalba balblablablal"></div>

滚动淡出场景适配 #

如果用于滚动时的淡出效果，可以结合JavaScript监听滚动事件，动态调整mask的渐变参数，或是改变伪元素的高度/位置，实现随滚动变化的淡出效果。

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