CSS伪元素水印需容器设position: relative，用::before/::after定位文字；Bootstrap 5中应将水印挂载于比例容器而非img标签；防截图等强需求须用服务端生成。
用 CSS 叠加伪元素实现图片水印
纯前端水印不需要改原始图片，::before 或 ::after 配合定位就能盖一层文字。但得注意图片容器必须是相对定位，否则绝对定位的水印会脱标乱飞。
- 给图片外层容器加
position: relative，这是硬性前提 - 水印文字用
content: "© 2024"写在伪元素里，不能靠innerHTML插入 - 字体大小建议用
rem或vmin，避免在小图上文字溢出或看不清 - 透明度别设太低（比如
opacity: 0.1），实测低于 0.15 在 Retina 屏上基本看不见
.watermarked-img {
position: relative;
display: inline-block;
}
.watermarked-img::after {
content: "CONFIDENTIAL";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-30deg);
color: rgba(255, 255, 255, 0.2);
font-size: 3rem;
font-weight: bold;
pointer-events: none;
z-index: 1;
}
Bootstrap 5 的 img-fluid 和水印冲突怎么办
img-fluid 会让图片响应式缩放，但伪元素定位基于容器尺寸，图片一缩，水印位置就偏。不是 bug，是预期行为——你得把定位锚点从图片本身转移到容器。
- 别把
img-fluid直接加在<img>上再套水印；而是用<div class="ratio ratio-16x9">这类 Bootstrap 5 的比例容器包住图片 - 水印伪元素挂载在容器上，不是
<img>标签上 - 如果图片宽高比不固定，用
aspect-ratioCSS 属性（现代浏览器）比旧版padding-top技巧更稳
服务端生成水印图片更可靠的场景
当水印要防截图、防右键另存、或者文字需精确压在特定坐标（比如身份证照片右下角），CSS 方案就不够用了。这时候得换思路：用 PHP 的 imagecopy()、Python 的 PIL.ImageDraw.text() 或 Node.js 的 sharp 库处理。
- 用户上传后立刻生成带水印的新文件，原图不暴露给前端
- 文字坐标按像素算，不受缩放、DPR、滚动影响
- 注意字体文件路径：PHP
imagettftext()必须传真实服务器路径，不是 URL - 如果用
sharp，记得调用toBuffer()再写入磁盘，直接toFile()在某些异步流程里会丢帧
文字水印被截断或模糊的常见原因
看起来是样式问题，实际常卡在渲染层。特别是用 transform: rotate() + 小字号时，浏览器亚像素渲染会让边缘发虚。
- 加
backface-visibility: hidden或transform: translateZ(0)强制 GPU 加速，能缓解模糊 - 文字超出容器？检查父容器有没有
overflow: hidden，Bootstrap 的.card默认就有 - 水印在 modal 里消失？大概率是
z-index被 modal-backdrop 盖住了，手动设z-index: 1060+ - Firefox 下
rotate文字锯齿严重？加-webkit-font-smoothing: antialiased有改善
