HTML怎么做滚动渐变遮罩_html容器滚动渐变遮罩效果【零基础】-html教程-PHP中文网

最稳妥方案是用mask-image配合linear-gradient实现滚动容器边缘渐隐，需加-webkit前缀并处理firefox兼容性；不支持时退至pointer-events:none的伪元素方案。

html怎么做滚动渐变遮罩_html容器滚动渐变遮罩效果【零基础】

滚动容器的渐变遮罩，本质不是“给滚动条加效果”，而是让容器**可视区域的上下/左右边缘产生视觉渐隐**——防止内容突然被裁切。最稳妥、兼容性最好的方案是用 mask-image 配合 linear-gradient，但必须处理好前缀和 fallback。

用 `mask-image` 实现纯 CSS 滚动渐隐

这是目前最干净的方案：不新增 DOM 元素、不干扰滚动行为、支持响应式。关键在于用渐变定义“哪些区域该显示，哪些该透明”。

mask-image 的渐变颜色只能是 black（显示）、white（显示）、transparent（隐藏），不能用 rgba()；写成 to bottom, transparent 0%, black 20px, black calc(100% - 20px), transparent 100% 才能控制遮罩高度
必须加 -webkit-mask-image 前缀，Chrome/Safari 当前仍需它；Firefox 目前完全不支持 mask-image 的渐变值（2026 年中仍如此）
父容器背景不能是透明或渐变色，否则遮罩边缘会漏底——此时得退回到伪元素方案

示例代码：

scrollable-container {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 24px, black calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 24px, black calc(100% - 24px), transparent 100%);
}

fallback：用伪元素 + `pointer-events: none`

当需要兼容 Firefox 或父容器背景复杂时，退回伪元素叠加。但它不是“盖在滚动容器上”，而是盖在它的**父级定位容器**上，否则会随滚动一起动。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

结构必须是：<div class="outer"><div class="relative-wrapper"> <div class="top-mask"></div> <div class="bottom-mask"></div> <div class="scrollable-container"></div> </div></div>
.top-mask 和 .bottom-mask 要设 pointer-events: none，否则鼠标滚轮在遮罩区域会失效
渐变方向写 to top 或 to bottom 比角度更直观；height 建议固定（如 24px），避免响应式错位

示例：

.top-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 24px;
  background: linear-gradient(to top, transparent, #fff);
  pointer-events: none;
}