弹幕透明度必须用CSS的opacity或rgba()动态控制并存入localStorage，需做范围校验、类型转换和容错处理，否则刷新重置、渲染异常、兼容性崩坏。
弹幕透明度必须用 CSS 的 opacity 或 rgba() 控制，不能靠 HTML 属性；存取值要走 localStorage，且必须做范围校验和类型转换，否则滑块一拖就崩。
为什么弹幕透明度不能只写 opacity: 0.7 就完事
直接在 CSS 里写死 opacity 值，用户每次刷新页面都会重置——这不是“调节”，是摆设。弹幕是动态渲染的元素，通常由 JS 创建并插入 DOM，所以透明度必须在运行时注入，而不是靠静态样式表。更关键的是：opacity 作用于整个弹幕节点（含文字、描边、阴影），子元素无法通过设 opacity: 1 拉回来；若弹幕用了 SVG 或 canvas 渲染，opacity 还可能被忽略或表现异常。
常见错误现象：
-
div.danmaku { opacity: 0.6; }写在全局 CSS 里，但用户调成 0.3 后刷新又变回 0.6 - 弹幕文字用了
text-shadow，opacity会让阴影也变淡，导致可读性骤降 - 移动端 Safari 下，频繁修改
opacity可能触发重绘抖动，尤其在高密度弹幕场景
怎么用 localStorage 记住用户调过的值
核心逻辑就两步：改的时候存，渲染前读。但必须加容错，因为隐私模式下 localStorage 会直接抛 QuotaExceededError 或 SecurityError。
立即学习“前端免费学习笔记（深入）”；
- 保存时做数值归一化：
const alpha = Math.min(1, Math.max(0, parseFloat(value) || 0.8)) - 存字符串而非数字：
localStorage.setItem('danmakuAlpha', alpha.toString())（避免读出来是"0.7000000000000001"） - 读取时包
try...catch，失败就用默认值：let alpha = 0.8; try { alpha = parseFloat(localStorage.getItem('danmakuAlpha')) || 0.8; } catch (e) {} - 监听
<input type="range">的input事件，不是change——后者只在松手后触发，体验卡顿
怎么把透明度真正应用到弹幕上
不推荐给每个弹幕 DOM 节点都手动设 style.opacity，性能差、易漏、难维护。更稳的方式是注入 CSS 变量，让所有弹幕统一响应。
- 初始化时写入根变量：
document.documentElement.style.setProperty('--danmaku-opacity', alpha) - CSS 中这样写：
.danmaku { opacity: var(--danmaku-opacity, 0.8); } - 如果弹幕用
canvas渲染，得在绘制前设ctx.globalAlpha = alpha，且每次清空画布后重置，否则残留影响后续帧 - 若用 Web Components 或 Shadow DOM，注意
:host或::slotted里不能直接读var(--danmaku-opacity)，得透传为 attribute 或 property
容易被忽略的兼容性和可访问性坑
看似只是调个滑块，但真上线后常出问题的地方，往往不在代码本身。
- 暗色模式下，同一
opacity值在深色背景上文字对比度暴跌，建议搭配@media (prefers-color-scheme: dark)降低默认 alpha（比如从 0.8 改成 0.65） - Windows 高对比度模式下，
opacity可能被系统强制覆盖，需额外加@media (forced-colors: active)回退方案 - 读屏软件不会感知
opacity变化，但若把透明度设得太低（），正常视力用户也看不清，等于变相屏蔽信息 - 某些安卓 WebView（如旧版 QQ 浏览器内核）对 CSS 变量支持不全，得 fallback 到内联 style 注入
真正麻烦的从来不是怎么写那行 opacity，而是确保它在用户换设备、切主题、开辅助功能时，依然稳定生效——这些边界情况，往往要等灰度放量后才暴露。
