给直接加opacity会使图片和水印一同变淡，无法实现水印效果；应通过::after伪元素控制覆盖层透明度，且必须设置content: ""，父容器需position: relative并具有明确宽高，配合transform: translatez(0)防止模糊。

为什么不能直接给 <img> 加 opacity

加 opacity 会让整张图片变透明，连带水印文字也一起变淡，起不到“水印”效果——你想要的是图片清晰、文字半透地浮在上面。真正要控制的是覆盖层的透明度，不是原图。

::after 水印必须写 content: "" 才生效

这是最常被忽略的硬性条件：伪元素不写 content，浏览器直接忽略渲染，再完善的定位和背景都白搭。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• content: "" 是强制声明，哪怕内容为空
• 如果写成 content: "CONFIDENTIAL"，文字会作为伪元素内容渲染，适合纯文本水印
• 若用背景图做水印（比如 logo.png），content 仍需保留空字符串，靠 background-image 呈现

水印位置偏移或拉伸？检查父容器的 position 和尺寸

水印错位通常不是 ::after 写错了，而是它没锚对地方：

• 父容器（比如 <div class="img-watermark">）必须设 <code>position: relative，否则 ::after 会相对整个页面定位
• 父容器要有明确宽高，否则 width: 100%; height: 100% 在 ::after 里会算出 0
• 如果图片用了 object-fit: cover，建议用伪元素而非 background 实现水印——后者可能溢出裁剪区域

文字水印模糊或闪烁？加 transform: translateZ(0) 强制 GPU 渲染

尤其在 Safari 或旧版 Chrome 中，纯 opacity + transform: rotate() 容易触发亚像素渲染问题，导致文字边缘发虚。

• 给 ::after 加上 transform: translateZ(0) 可绕过 CPU 渲染路径
• 旋转角度推荐 -25deg 到 -35deg，太小不显眼，太大影响阅读
• 透明度别超 rgba(255, 255, 255, 0.15) ——实测高于 0.18 就开始干扰主视觉
水印本质是视觉干扰项，不是功能组件；它得足够轻（不抢焦点）、足够稳（不随滚动错位）、足够防删（不用真实 DOM 节点）。用 ::after 是目前最平衡的选择，但每一步漏掉一个细节，比如 content、position、z-index，都会让效果当场失效。