如何使用CSS实现无背景色Div的透明渐变遮罩以提示内容可滚动？

阿华AIGC实验室

2026-4-30

使用CSS Mask实现无背景Div的内容渐隐滚动提示

当然有完美的解决方案！你需要的是CSS的mask属性（遮罩属性），它正好能解决这种「元素无背景、但要让内容渐隐」的场景，完全不受背后背景图的影响。

核心原理

CSS Mask的作用是直接对元素的内容（文字、子元素等）进行遮罩，而不是修改元素的背景。它通过渐变的透明度通道来控制内容的显示/隐藏：渐变中不透明的区域会显示元素内容，透明区域则会隐藏内容，完全忽略元素自身的背景设置，也不会影响背后的背景图。

具体实现代码

假设你的目标Div类名为.scroll-container，可以这样写：

.scroll-container {
  /* 设置元素的可滚动区域（按需调整高度） */
  max-height: 300px;
  overflow-y: auto;

  /* 核心：应用线性渐变遮罩 */
  /* 渐变方向：从顶部到底部，前70%保持内容可见，后30%逐渐透明 */
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  /* 兼容WebKit内核浏览器（如旧版Safari） */
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);

  /* 确保遮罩覆盖整个元素 */
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
}

关键细节说明

渐变中的black只是占位：Mask只关心颜色的透明度通道，所以用black、white甚至red都一样，只要是不透明（alpha值为1）的颜色即可。
调整渐变节点控制渐隐范围：比如把70%改成80%，会让可见区域更大，渐隐更短；反之则渐隐区域更长。
灵活调整渐变方向：如果需要顶部渐隐，把to bottom改成to top即可；如果要上下都有渐隐，可以用双向渐变：
```
mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
```