<picture>标签本身不支持水印，必须通过CSS在包裹容器中用伪元素或绝对定位实现；正确做法是外层div设position: relative，水印用::after伪元素absolute定位并设pointer-events: none，主图img设z-index: 0以确保层级正确。
picture 标签本身不支持水印，必须靠 CSS 叠加实现
HTML 的 <picture> 是语义化响应式图片容器，只负责「选图」——根据 <source> 规则挑出最合适的 <img> 并渲染。它不提供图层、合成或水印能力。想加版权水印，本质是把水印作为独立视觉层叠在主图上方，只能靠 CSS 定位 + 层级控制。
常见错误是试图在 <picture> 内塞多个 <img> 或用 <canvas> 动态绘制——既破坏语义，又丢失 srcset 响应能力，还增加 JS 依赖。
正确路径：保留 <picture> 管选图，用包裹容器（如 <div>）+ position: relative，再用绝对定位的 <img> 或伪元素承载水印。
用伪元素 ::after 实现轻量水印（推荐）
无需额外 DOM 节点，CSS 控制灵活，适合文字水印（如“© 2024 XXX”）或小图标。关键是让伪元素脱离文档流、压在图片上、且不干扰点击/可访问性。
立即学习“前端免费学习笔记（深入）”；
-
<picture>外层必须包一层<div class="watermarked-image">，并设position: relative - 水印伪元素设
position: absolute、z-index: 1，背景用linear-gradient或 base64 图片 - 主图的
<img>需设z-index: 0（配合父容器position: relative才生效） - 加
pointer-events: none到伪元素，避免遮挡图片的 hover/click
<div class="watermarked-image">
<picture>
<source media="(min-width: 768px)" srcset="hero-large.webp" type="image/webp">
<source srcset="hero-small.webp" type="image/webp">
<img src="hero-small.jpg" alt="风景照">
</picture>
</div>
.watermarked-image {
position: relative;
display: inline-block;
}
.watermarked-image::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 100px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100'%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-size='14' fill='%23fff' opacity='0.2'%3E© 2024 XXX%3C/text%3E%3C/svg%3E") no-repeat center;
background-size: contain;
transform: translate(-50%, -50%);
z-index: 1;
pointer-events: none;
}
用透明 PNG 图片做水印时的关键细节
若水印需高保真（如带渐变、阴影、复杂 logo），用透明 PNG 更稳妥。但必须注意加载时机和尺寸适配问题：
- 水印
<img>必须与主图同宽高比例，否则拉伸失真；建议用background-image替代<img>，更易控制缩放 - 如果水印图本身未优化（如 2MB PNG），会拖慢首屏，务必压缩并转 WebP（支持透明）
- 不要给水印图加
loading="lazy"—— 它依赖主图位置，懒加载可能错位 - 为兼容老浏览器，PNG 水印需 fallback 到 base64 内联或 SVG，不能只靠外部链接
响应式水印对齐容易失效的两个坑
水印在不同屏幕下偏移、缩放异常，通常不是 CSS 写错，而是忽略了容器行为：
-
<picture>默认是 inline 元素，其父容器<div>若没设display: block或明确宽高，position: absolute的水印会以视口为参考而非图片边界 - 主图
<img>若没设display: block，底部会有空白间隙（inline 元素基线对齐导致），挤压水印垂直位置 - 使用
object-fit: cover时，水印坐标需基于容器尺寸计算，而非图片原始尺寸 —— 建议水印用%或vw/vh单位，避开 px 绝对值
srcset、media、object-fit 组合下始终对齐，这需要反复在真实设备断点里验证位置和透明度。 
