如何用CSS在底部导航栏上方添加透明渐变效果？

要实现内容在被底部导航栏遮挡区域的渐变消失效果，不需要修改原元素本身，只需在内容的底部添加一个渐变遮罩层即可，下面提供两种实用方案：

方案一：使用伪元素（无需额外DOM） #

这种方案不需要新增HTML元素，直接通过CSS伪元素实现遮罩：

/* 内容容器 */
.content {
  position: relative;
  /* 可选：给内容底部留出导航栏高度的内边距，避免最后一行内容被完全遮挡 */
  padding-bottom: 60px;
}

/* 渐变遮罩伪元素 */
.content::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px; /* 高度与底部导航栏一致 */
  /* 渐变从透明过渡到导航栏/页面背景色（示例为白色，根据实际情况修改） */
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
  pointer-events: none; /* 不影响内容的点击、滚动交互 */
}

/* 底部导航栏样式示例 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #fff; /* 导航栏背景色，需与渐变终点色一致 */
}

方案二：使用独立遮罩元素 #

如果偏好使用单独的DOM元素实现，可添加一个遮罩div：

<div class="content">
  <!-- 你的内容 -->
  <div class="gradient-mask"></div>
</div>
<div class="bottom-nav"></div>

.content {
  position: relative;
  padding-bottom: 60px;
}

.gradient-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
  pointer-events: none;
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #fff;
}

关键注意点 #

• 渐变的终点颜色必须和底部导航栏（或页面背景）的颜色完全一致，才能实现自然的过渡效果；
• pointer-events: none 属性可以保证遮罩层不会拦截内容的点击、滚动等交互行为；
• 如果内容是可滚动的长列表，遮罩层会随内容容器一起滚动，确保始终覆盖在内容底部与导航栏重叠的区域。

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