本文详解如何通过伪元素叠加线性渐变遮罩，实现 youtube 推荐区上方标签栏的文字右侧自然淡出效果，解决纯 background: linear-gradient 无法直接作用于文本颜色的问题。
本文详解如何通过伪元素叠加线性渐变遮罩，实现 youtube 推荐区上方标签栏的文字右侧自然淡出效果，解决纯 background: linear-gradient 无法直接作用于文本颜色的问题。
在构建 YouTube 类似 UI 时，常见需求是让横向滚动的标签栏（如“全部”“直播”“最近上传”等）在可视区域右侧呈现柔和的渐变遮罩效果——即内容向右延伸时，文字和按钮逐渐隐去，模拟原生 YouTube 的视觉过渡。但需注意：CSS 的 linear-gradient 不能直接作为 color 属性值使用，因此无法像背景一样对文字做渐变色；必须借助视觉叠加方案实现“文字淡出”效果。
核心思路是：用伪元素 ::after 在容器顶层覆盖一层从透明到不透明的水平渐变，遮挡超出可视区域的文本边缘，从而营造出文字自然消失的错觉。
以下是完整、可直接复用的实现方案：
✅ 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;
}⚠️ 注意事项与优化建议
- pointer-events: none 必不可少：否则伪元素会拦截鼠标事件，导致按钮无法点击；
- z-index 需明确：确保遮罩层位于按钮上方但不干扰交互；
- 渐变比例灵活调整：75% 是经验起点，可根据实际容器宽度和按钮数量微调（如按钮更多可设为 85%）；
- 响应式适配：在小屏幕下可结合 @media 减小 gap 和 font-size，并动态调整遮罩起始位置；
- 无障碍提示：若该栏有重要导航功能，建议为 .button 添加 role="tab" 和 aria-selected 属性以提升可访问性。
该方案完全脱离 JavaScript，纯 CSS 实现，性能优异且兼容现代主流浏览器（Chrome 58+、Firefox 64+、Safari 12.1+）。它精准复刻了 YouTube 标签栏的视觉语言——不是“文字变透明”，而是“被优雅地遮住”，这才是专业 UI 复刻的关键细节。
