本文详解如何通过 html 滑块（``）动态修改元素 `:before` 伪类的 `linear-gradient` 背景，实现可交互的渐变遮罩效果，并修复常见 dom 操作、css 注入与数值归一化问题。
在 Web 开发中，利用伪元素（如 :before）叠加渐变遮罩是增强图像视觉层次的常用技巧。但若希望用户通过滑块实时调节渐变范围（例如控制白色透明过渡区域的高度），直接操作 CSS 伪元素存在限制——伪元素无法通过 JavaScript 直接获取或修改样式，因此必须采用动态注入
以下为完整、可运行的实现方案：
✅ 正确做法：动态注入带计算值的 CSS 规则
关键修正点包括：
- 使用 jQuery 的 .on('input', ...) 绑定事件（而非原生 oninput = ...），确保事件委托生效；
- 将滑块原始值 0–100 归一化为 0–1 便于数学运算，再转回百分比用于 CSS；
- 必须在 linear-gradient() 前显式添加 background:，否则样式无效；
- rgba() 的 alpha 值建议写为 1.0（而非 1），避免部分浏览器解析异常；
$('#range').on('input', function() {
const ratio = parseFloat(this.value) / 100; // 归一化为 0–1
const whiteStop = (ratio * 100).toFixed(1); // 白色区域终点（%）
const transparentStop = ((1 - ratio) * 100).toFixed(1); // 透明区域起点（%）
// 动态生成并插入样式规则（覆盖 :before 的 background）
const style = `<style>
#filter:before {
background: linear-gradient(
to top,
rgba(255, 255, 255, 1.0) ${whiteStop}%,
rgba(0, 0, 0, 0) ${transparentStop}%
);
}
</style>`;
// 移除旧样式，避免重复累积（重要！）
$('#filter style').remove();
$(style).appendTo('#filter');
});⚠️ 注意事项与优化建议
-
性能优化：频繁创建/移除
#filter:before { background: linear-gradient( to top, rgba(255,255,255,1.0) var(--white-stop, 15%) , rgba(0,0,0,0) var(--trans-stop, 22%) ); }$('#range').on('input', function() { const r = this.value / 100; $('#filter').get(0).style.setProperty('--white-stop', `${r * 100}%`); $('#filter').get(0).style.setProperty('--trans-stop', `${(1 - r) * 100}%`); });此方式更高效、可维护，且无需操作 DOM 样式节点。
兼容性：linear-gradient() 在现代浏览器中支持良好；若需支持 IE，需降级为 filter: progid:DXImageTransform.Microsoft.gradient(...)（已不推荐）。
-
无障碍（a11y）：为滑块添加 aria-label 和 aria-valuetext，例如：
<input type="range" id="range" min="0" max="100" value="0" aria-label="调整渐变遮罩强度" aria-valuetext="当前值：0%">
✅ 最终效果说明
当滑块从 0 拖至 100 时，:before 渐变将从「全透明」（rgba(0,0,0,0) 100%）平滑过渡为「纯白顶部覆盖」（rgba(255,255,255,1.0) 100%），形成由下至上逐渐显现的柔光效果。该技术广泛适用于图片画廊、卡片悬停增强、登录页背景渐变等场景。
掌握此模式后，你还可以轻松扩展为双色渐变、角度控制、甚至结合 HSL 动态变色——核心逻辑始终是：将用户输入映射为 CSS 可接受的数值单位，并通过可靠方式注入样式。
