水印文字禁用opacity，应改用rgba颜色+text-shadow提升对比度；伪元素须挂载于相对定位容器而非img标签；避免opacity/transform/filter触发层叠上下文导致z-index失效或错位。
opacity 不该用在水印文字上——它会让整个伪元素（含字体、阴影、边框）一起发虚，且无法单独强化文字对比度。
水印文字变淡的真正原因不是 opacity 值小，而是颜色本身明度高+透明度叠加失真
Bootstrap 4 默认没给水印加 opacity，但很多人照搬示例写 .watermark::after { opacity: 0.15 }，结果在 Retina 屏或深色背景上几乎看不见。这不是浏览器 bug，是 rgba 颜色通道 + opacity 双重衰减导致的视觉丢失：字体抗锯齿信息被弱化，灰阶细节糊成一片。
- 别用
opacity: 0.1—— 实测在 macOS Safari 和 Chrome 下，低于0.18就开始断字、边缘溶蚀 - 优先改
color值：用rgba(255, 255, 255, 0.25)替代white+opacity: 0.25 - 加
text-shadow补对比：比如text-shadow: 0 0 8px rgba(0,0,0,0.3)，能立刻提升可读性
Bootstrap 4 的 .img-fluid 会破坏水印定位，必须用容器包裹而非直接挂载在 img 上
把 opacity 或 color 调再高也没用，如果水印伪元素绑在 <img> 标签上，而图片用了 class="img-fluid"，那水印坐标就永远对不准——因为 img-fluid 通过 max-width: 100% 和 height: auto 动态缩放图片，但伪元素的 position: absolute 是基于父容器尺寸计算的，不是图片实际渲染尺寸。
- 必须把
<img>包进一个<div class="watermark-container">，并设 <code>position: relative - 水印伪元素写在
.watermark-container::after，不是img::after - 若需响应式比例，用 Bootstrap 4 的
.embed-responsive容器替代手动宽高 - 禁用
opacity，改用color: rgba(255, 255, 255, 0.22)—— alpha 只作用于文字，不触发新 stacking context - 确保水印容器没有
transform、will-change或filter，这些属性和opacity同样会创建层叠上下文 - 检查 computed styles 中是否出现
stacking context: true，这是水印错位的第一线索
opacity 在水印场景下会意外创建层叠上下文，导致 z-index 失效或遮挡交互
只要给水印容器设了 opacity: 0.99（哪怕只是想“几乎不透明”），它就会强制创建新层叠上下文。后果是：z-index: 999 在容器内部失效，水印可能被同级的按钮、弹窗盖住；更糟的是，如果页面其他地方用了 transform 或 filter，水印还可能被剪裁或错位。
最常被忽略的一点：水印文字用 font-weight: bold 比调 opacity 更有效——加粗能增强笔画密度，在低透明度下仍保持结构清晰，比硬拉 alpha 值更可靠。
