不能直接对<img>用opacity加水印，因其会使整图（含后续叠加文字）变淡；正确做法是用::after伪元素+position: absolute+rgba()控制文字自身透明度，确保图片不变、水印独立可调。
为什么不能直接对图片用 opacity 加水印文字
直接给 <img> 元素加 opacity，再叠一层文字，会导致整个图片变透明——文字也跟着变淡，甚至看不清。更糟的是，opacity 会穿透到子元素（但 <img> 没子元素），所以你没法只让水印文字半透明而保留图片原样。真正要控制的，是「水印层自身的透明度」，且它必须独立于图片渲染。
::after + content 实现水印文字的关键条件
这个方案本质是用伪元素伪造一个文字层，盖在图片上方。但它不是万能的，必须满足几个硬性前提：
- 图片容器（比如
<div>）必须设position: relative，否则::after无法相对于它定位 -
::after必须显式声明content: "你的水印"，空字符串或缺失会直接不渲染 - 必须设
position: absolute，否则::after会按文档流排布，根本盖不到图片上 - 推荐加
pointer-events: none，避免水印挡住图片点击或 hover 交互
rgba() 比 opacity 更适合控制水印文字透明度
用 color: rgba(0, 0, 0, 0.2) 设置文字颜色透明度，比给整个 ::after 元素设 opacity: 0.2 更安全。因为后者会让文字描边、阴影、甚至 text-stroke 都一起变淡；而 rgba() 只影响颜色通道，文字粗细、轮廓、混合效果都保持原样。
常见错误写法：color: #000; opacity: 0.2 —— 这会让文字和它的所有视觉属性（包括你可能加的 text-shadow）同时变淡，难以微调。
立即学习“前端免费学习笔记（深入）”；
正确写法示例：
img-watermark::after {
content: "CONFIDENTIAL";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-30deg);
color: rgba(255, 255, 255, 0.15); /* 关键：alpha = 0.15 */
font-size: 48px;
font-weight: bold;
pointer-events: none;
z-index: 1;
}容易被忽略的兼容性与性能细节
IE11 支持 ::after 和 content，但不支持 transform: rotate() 在伪元素上生效（会失效）；Safari 旧版本对 rgba() 的 alpha 渲染略偏暗。如果水印文字需要旋转+高精度透明，建议补一句 -webkit-transform 前缀。
另外，大量使用 ::after 水印（比如每张图都加）会轻微增加渲染树节点数，对长列表页有可测的重绘开销——这时应优先考虑 CSS background-image 方案，而非逐个元素挂伪元素。
