如何实现非均匀背景下文本随水平滚动淡出效果？

我需要实现一个文本随水平滚动淡出的区块，该区块位于非均匀背景之上，因此侧边添加线性渐变遮罩的方案不适用。参考了一个垂直滚动淡出的实现方案，尝试适配到水平滚动场景但未成功，求可行的解决办法。

原垂直滚动淡出方案代码 #

HTML #

<body>
  <div class='fade'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</body>

CSS #

*{
  box-sizing:border-box;
  margin:0;
  font-family: sans-serif;
}

body{
  min-height: 100vh;
  color:white;
  background: url('https://images.pexels.com/photos/414144/pexels-photo-414144.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat center/cover;
  display: flex;
  background-attachment:fixed;
}

.fade{
  width: 100%;
  max-width: 640px;
  margin:auto;
  background-image: linear-gradient(
    transparent 12%,
    currentColor 30%,
    currentColor 70%,
    transparent 86%
  );
  -webkit-background-clip: text;
  background-attachment:fixed;
}

p{
  color:transparent;
}

水平适配失败的原因 #

原垂直方案核心是利用background-attachment: fixed让渐变背景固定在视口，文本设为透明后通过background-clip: text让渐变显示为文字，滚动时文字移动、渐变固定，实现上下淡出。但你的水平尝试存在问题：

1. 渐变背景加在了容器.fade上，而滚动的是内部<p>元素，渐变未跟随滚动逻辑
2. background-attachment: fixed在水平滚动场景下无法实现预期的相对滚动效果
3. 布局上未正确设置滚动容器的层级和背景属性关联

水平滚动淡出的可行方案 #

完整代码 #

HTML

<body>
  <div class="scroll-container">
    <p class="fade-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</body>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  font-family: sans-serif;
}

body {
  min-height: 100vh;
  color: white;
  background: url('https://images.pexels.com/photos/414144/pexels-photo-414144.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat center/cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scroll-container {
  width: 100%;
  max-width: 540px;
  overflow-x: auto;
  padding: 1rem 0;
}

.fade-text {
  color: transparent;
  white-space: nowrap;
  background-image: linear-gradient(to right,
    transparent 5%,
    currentColor 20%,
    currentColor 80%,
    transparent 95%);
  -webkit-background-clip: text;
  background-clip: text;
  background-attachment: local;
}

关键要点说明 #

• 滚动容器：将<div class="scroll-container">设为水平滚动容器，限制宽度并开启overflow-x: auto
• 渐变文本：把渐变背景直接应用在滚动的<p>元素上，设置background-attachment: local让背景跟随文本内容滚动
• 核心属性：保持color: transparent和background-clip: text，让渐变作为文字的显示颜色
• 渐变范围：调整渐变的百分比参数，可以灵活控制左右两侧的淡出宽度和过渡区域

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