本文详解如何通过伪元素叠加线性渐变遮罩，为水平滚动标签栏中的文字添加右侧渐隐效果，解决纯 background: linear-gradient 无法直接作用于文本颜色的常见问题。
本文详解如何通过伪元素叠加线性渐变遮罩，为水平滚动标签栏中的文字添加右侧渐隐效果，解决纯 background: linear-gradient 无法直接作用于文本颜色的常见问题。
在构建 YouTube 风格的推荐视频上方分类标签栏（如“全部”“直播”“最近上传”等）时，常需实现「内容向右滚动，右侧文字自然淡出」的视觉效果。但直接对
文本应用 background: linear-gradient 并设置 -webkit-background-clip: text 和 color: transparent 在滚动容器中易失效，且兼容性差、响应不稳。
正确方案是使用「渐变遮罩层」（Gradient Overlay）：通过绝对定位的 ::after 伪元素覆盖在文字区域右侧，用半透明到不透明的横向渐变模拟“文字被遮挡淡化”的视觉效果，既轻量又可靠。
Youtube Script
下载
YouTube视频脚本、标题A/B测试、缩略图文案、SEO优化、开头Hook、章节标记。YouTube script writer with title testing, thumbnail copy, SEO optimization, hooks.
✅ 推荐实现代码（含关键注释）
<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>
/* 外层容器：提供相对定位上下文 */
#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-right: 1.2rem; /* 为遮罩预留右侧空间，避免遮挡最后按钮边缘 */
/* 隐藏滚动条（跨浏览器） */
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;
cursor: pointer;
min-width: 6rem;
text-align: center;
transition: background-color 0.2s;
}
.button:hover {
background-color: #c0c0c0;
}
/* 渐隐遮罩层：覆盖在滚动区右端 */
#bar-wrapper::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 1.5rem; /* 遮罩宽度，建议 1.2–2rem */
height: 100%;
background: linear-gradient(90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%);
pointer-events: none; /* 确保不拦截鼠标事件 */
z-index: 1;
}
⚠️ 关键注意事项
- 不要给 .button 设置 background-clip: text：该方式依赖 color: transparent，在滚动容器中易因重绘导致闪烁或失效；遮罩法更稳定。
- 遮罩必须用 position: absolute + z-index：确保它浮在所有按钮之上，且仅覆盖右侧区域。
- padding-right 不可省略：为遮罩留出物理空间，否则最右侧按钮可能被裁切或交互失灵。
- 适配深色模式？ 若页面支持暗色主题，将遮罩 background 改为 linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%) 即可无缝衔接。
- 移动端优化建议：可配合 @media (max-width: 768px) 缩小 font-size 和 padding，并增大遮罩宽度至 2rem，提升小屏渐隐感知度。
此方案已在 Chrome、Firefox、Safari 及 Edge 最新版中验证通过，零 JS 依赖，性能优异，是复刻 YouTube 标签栏专业感的核心技巧之一。
