实现滚动时文本顶部渐变透明效果（用opacity替代blur）

要将原有的模糊滚动效果替换为文本顶部逐渐透明的效果，只需修改.content:after的样式，移除模糊滤镜，改用与背景色一致的线性渐变遮罩层即可：

修改后的完整代码 #

CSS

body {
  margin: 0;
}

.wrapper {
  background: red;
}

.content {
  width: 400px;
  margin: auto;
  position: relative;
}

.content:after {
  content: '';
  position: fixed;
  width: 100%;
  height: 140px;
  display: block;
  top: 0;
  left: 0;
  /* 用红色到透明的线性渐变替代模糊效果，实现文本顶部渐隐 */
  background: linear-gradient(to bottom, rgba(255, 0, 0, 1), rgba(255, 0, 0, 0));
  pointer-events: none;
  z-index: 1000;
}

HTML

<div class="wrapper">
  
  <div class="content">
    <div>
      Nam lacus libero, interdum euismod dui quis, sodales aliquam massa. Vivamus eget faucibus est, at tincidunt metus. Nulla eleifend aliquet purus. Nunc semper, lectus ut interdum pellentesque, velit ante feugiat arcu, non accumsan ex nulla a libero. Fusce vitae lectus iaculis, accumsan urna in, egestas mauris. Integer nec mi facilisis, fringilla eros sed, imperdiet purus. Ut in velit mi. Vivamus leo arcu, consectetur sed tellus commodo, dictum feugiat ex. Aliquam id arcu rutrum, euismod ligula at, vestibulum augue. Phasellus et nibh a nulla tempor sagittis. Nulla placerat magna quis tincidunt malesuada. Donec eleifend mollis eros, id vulputate est tempus a. Curabitur rutrum imperdiet turpis a accumsan. Ut malesuada varius mi, id varius purus malesuada at.
      Nam lacus libero, interdum euismod dui quis, sodales aliquam massa. Vivamus eget faucibus est, at tincidunt metus. Nulla eleifend aliquet purus. Nunc semper, lectus ut interdum pellentesque, velit ante feugiat arcu, non accumsan ex nulla a libero. Fusce vitae lectus iaculis, accumsan urna in, egestas mauris. Integer nec mi facilisis, fringilla eros sed, imperdiet purus. Ut in velit mi. Vivamus leo arcu, consectetur sed tellus commodo, dictum feugiat ex. Aliquam id arcu rutrum, euismod ligula at, vestibulum augue. Phasellus et nibh a nulla tempor sagittis. Nulla placerat magna quis tincidunt malesuada. Donec eleifend mollis eros, id vulputate est tempus a. Curabitur rutrum imperdiet turpis a accumsan. Ut malesuada varius mi, id varius purus malesuada at.
    </div>
  </div>
  
</div>

说明 #

• 移除了原代码中的backdrop-filter: blur(8px)和-webkit-mask属性
• 新增线性渐变背景，创建一个从完全不透明的红色到透明的渐变层，固定在页面顶部
• 这个渐变层会覆盖滚动到顶部的文本，让文本看起来逐渐变为透明，与背景融合

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