如何使用CSS实现动态尺寸UL顶部20%的线性透明度渐变效果？

API 探路者

2026-9-28

可行实现方案

你之前尝试的写法不生效是因为opacity属性不支持渐变值，该需求可以通过CSS mask遮罩属性实现，该方案无需额外叠加层，可自适应UL动态尺寸，且不会破坏下层多变纹理背景的展示效果。

核心实现代码

如果需要顶部20%区域从完全透明线性过渡到完全不透明，使用以下代码：

.target-ul {
  /* 标准浏览器兼容 */
  mask: linear-gradient(to bottom, transparent 0%, #000 20%);
  /* Webkit内核浏览器兼容（Chrome、Safari、Edge、移动端浏览器等） */
  -webkit-mask: linear-gradient(to bottom, transparent 0%, #000 20%);
}

如果需要顶部20%完全透明，20%位置硬切为完全不透明，调整渐变参数即可：

.target-ul {
  mask: linear-gradient(to bottom, transparent 0%, transparent 20%, #000 20%, #000 100%);
  -webkit-mask: linear-gradient(to bottom, transparent 0%, transparent 20%, #000 20%, #000 100%);
}