如何用CSS实现滚动文本div边缘与背景图片的羽化融合？

这个问题我太熟了！之前用inset box-shadow或者普通线性渐变踩过一模一样的坑——它们只能往固定颜色过渡，没法做到“透明融入后方任意内容”。其实解决这个问题的核心就是用CSS的**mask属性**，它专门用来控制元素的显示区域，完美适配你的需求。

核心思路 #

mask的工作逻辑是：遮罩里的不透明区域会显示元素内容，透明区域则会透出后方的内容。我们可以用线性渐变创建一个“中间完全显示、边缘逐渐透明”的遮罩，这样文本滚动进出时就会自然渐隐/渐显，完全融入后方的任意内容。

代码实现（横向滚动示例） #

假设你的滚动文本容器是.scroll-text-wrap，直接给它加遮罩即可：

.scroll-text-wrap {
  /* 基础滚动配置 */
  overflow-x: auto;
  white-space: nowrap;
  padding: 0 1rem; /* 给边缘羽化留些空间，避免文本贴边 */
  
  /* 核心遮罩：左右边缘从透明过渡到完全显示 */
  mask: linear-gradient(to right, transparent, white 10%, white 90%, transparent);
  /* 兼容WebKit内核浏览器（比如Safari） */
  -webkit-mask: linear-gradient(to right, transparent, white 10%, white 90%, transparent);
}

纵向滚动的适配 #

如果是纵向滚动，只需要把渐变方向改成to bottom即可：

.scroll-text-wrap {
  overflow-y: auto;
  max-height: 250px; /* 按需设置容器高度 */
  padding: 1rem 0;
  
  mask: linear-gradient(to bottom, transparent, white 10%, white 90%, transparent);
  -webkit-mask: linear-gradient(to bottom, transparent, white 10%, white 90%, transparent);
}

自定义羽化范围 #

你可以调整渐变里的百分比参数来控制羽化的宽度：

• 把10%改成5%：羽化范围更窄，过渡更锐利
• 改成15%：羽化范围更宽，过渡更柔和

为什么之前的方法不行？ #

• inset box-shadow：本质是给元素内部加阴影，背景透明时阴影会显示成黑色（或你设置的阴影色），没法透出后方内容
• 普通linear-gradient作为背景：是给元素加背景层，文本在背景上方，同样没法让文本本身渐隐透过后方内容

而mask是直接作用于元素的显示区域，相当于给元素“剪”了一个边缘渐变透明的形状，完全解决了透明背景下的融合问题。

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