如何为 YouTube 风格标签栏添加渐变遮罩效果（文字边缘淡出）-html教程-PHP中文网

如何为 YouTube 风格标签栏添加渐变遮罩效果（文字边缘淡出）

本文详解如何通过伪元素叠加线性渐变遮罩，实现 youtube 推荐区上方标签栏的文字右侧自然淡出效果，解决纯 background: linear-gradient 无法直接作用于文本颜色的问题。

本文详解如何通过伪元素叠加线性渐变遮罩，实现 youtube 推荐区上方标签栏的文字右侧自然淡出效果，解决纯 background: linear-gradient 无法直接作用于文本颜色的问题。

在构建 YouTube 类似 UI 时，常见需求是让横向滚动的标签栏（如“全部”“直播”“最近上传”等）在可视区域右侧呈现柔和的渐变遮罩效果——即内容向右延伸时，文字和按钮逐渐隐去，模拟原生 YouTube 的视觉过渡。但需注意：CSS 的 linear-gradient 不能直接作为 color 属性值使用，因此无法像背景一样对文字做渐变色；必须借助视觉叠加方案实现“文字淡出”效果。

核心思路是：用伪元素 ::after 在容器顶层覆盖一层从透明到不透明的水平渐变，遮挡超出可视区域的文本边缘，从而营造出文字自然消失的错觉。

Youtube Script

YouTube视频脚本、标题A/B测试、缩略图文案、SEO优化、开头Hook、章节标记。YouTube script writer with title testing, thumbnail copy, SEO optimization, hooks.

下载

以下是完整、可直接复用的实现方案：

✅ HTML 结构（保持语义清晰）

<div id="bar-wrapper">
  <div id="bar-scroll">
    <div class="button" onclick="barActive(this)">Wszystkie</div>
    <div class="button" onclick="barActive(this)">Źródło: Ixo Music</div>
    <div class="button" onclick="barActive(this)">Podobne</div>
    <div class="button" onclick="barActive(this)">Na żywo</div>
    <div class="button" onclick="barActive(this)">Ostatnio przesłane</div>
    <div class="button" onclick="barActive(this)">Obejrzane</div>
  </div>
</div>

✅ CSS 样式（关键遮罩 + 滚动优化）

/* 外层容器：承载渐变遮罩 */
#bar-wrapper {
  position: relative;
  width: 100%;
  height: 2.5rem; /* 略高于按钮高度，确保遮罩覆盖完整 */
}

/* 内层滚动容器：启用平滑横向滚动 */
#bar-scroll {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.9em;
  overflow-x: auto;
  white-space: nowrap;
  padding: 0 1rem; /* 可选：为遮罩留出左右缓冲 */
  /* 隐藏滚动条（各浏览器兼容写法） */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
#bar-scroll::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Opera */
}

/* 按钮基础样式 */
.button {
  background-color: #d3d3d3;
  color: #000;
  border-radius: 0.8em;
  padding: 0.4rem 0.75rem;
  min-width: 6rem;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s;
}
.button:hover {
  background-color: #c0c0c0;
}

/* 关键：渐变遮罩层（伪元素） */
#bar-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none; /* 确保不阻挡点击事件 */
  background: linear-gradient(
    90deg,
    transparent 75%,     /* 左侧 75% 完全透明 */
    rgba(255, 255, 255, 0.9) 100% /* 右侧 25% 渐变为浅白，柔和遮盖文字 */
  );
  z-index: 1;
}

/* 可选：左侧也加轻微遮罩（增强沉浸感） */
#bar-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.9) 0%,
    transparent 25%
  );
  z-index: 1;
}