hex8中00–03对应完全透明（00）、约0.4%不透明（01）、约0.8%不透明（02）、约1.2%不透明（03）；实际可用最低非零值为01，但稳定可见底线通常是03。
HEX8里00–03对应什么透明度？
极低透明度（比如水印）不是靠“看着调”，而是必须按Math.round(255 * alpha)换算。0.01 → 3 → 03，0.005 → 1 → 01，0.001 → 0 → 00（完全透明，无效）。实际可用的最低非零值是01（≈0.4%不透明），其次是02（≈0.8%）、03（≈1.2%）。写#00000005看似“5%”，其实是0x05 = 5/255 ≈ 2%——比你预想的高一倍。
水印场景下#rrggbbaa容易静默失效的三种情况
水印常被设为background-image或伪元素::after，但HEX8在这里尤其脆弱：
- 没写 fallback：Safari ≤17、旧安卓 WebView 直接跳过整条声明，水印消失，页面背景裸露
- CSS变量里加引号：
--watermark: "#00000003"→ 变量值变成字符串，background-color: var(--watermark)不生效 - 用
opacity叠加：在已用#00000003的元素上再设opacity: 0.3，结果是 0.012 × 0.3 ≈ 0.0036，浏览器可能四舍五入归零，水印彻底不可见
推荐写法：fallback顺序 + 精确换算 + 避免变量拼接
水印要稳，就得放弃“差不多”，每一步都卡死：
- fallback 必须按兼容性倒序：
background-color: #000; background-color: rgba(0, 0, 0, 0.01); background-color: #00000003; - 用脚本生成而非心算：
const toHexAlpha = alpha => Math.round(255 * alpha).toString(16).padStart(2, '0');→toHexAlpha(0.008)得02 - 别用 CSS 变量存带透明度的 HEX8；若必须，定义时去掉引号、大小写统一：
--watermark: #00000002;，使用时只background-color: var(--watermark);
为什么#00000001在部分设备上根本看不见
不是代码错，是渲染极限问题：
- 某些低端 Android 屏幕的 Alpha 通道精度只有 4 位（0–15），
01会被截断为 0 - 抗锯齿和 subpixel 渲染会稀释本就微弱的灰度，尤其在浅色背景上
- 设计师给的“0.5%透明度”在 CSS 里只能取整到
01或02，没有中间态——要么可见，要么归零
真正能稳定露出水印的底线通常是03（≈1.2%）或配合轻微模糊滤镜：filter: blur(0.5px);，但要注意这会增加重绘开销。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
