使用position: absolute与opacity可实现网页图片水印。1. 通过absolute定位使水印脱离文档流并精准定位，父容器设为relative作为定位上下文；2. 利用opacity设置0.2-0.5间透明度，确保水印可见且不遮挡背景；3. 实际代码中结合transform居中水印，并使用pointer-events: none避免交互干扰；4. 可替换文字水印为背景图形式的图像水印，实现重复图案覆盖。该方法灵活高效，是网页水印常用方案。
在网页中添加图片水印，可以通过 position: absolute 与 opacity 结合实现。这种方式能让水印脱离文档流、精准定位，并通过透明度避免干扰背景内容。
1. 使用 absolute 定位水印
将水印元素设置为绝对定位，使其相对于最近的已定位祖先元素（position 不是 static）进行定位。通常可将容器设为 relative，水印设为 absolute，从而精确控制位置。
- 给父容器设置 position: relative，作为定位上下文
- 水印元素使用 position: absolute
- 通过 top、left、right、bottom 调整水印位置
2. 利用 opacity 控制透明度
opacity 属性让水印半透明显示，既可见又不遮挡背景内容。一般设置 opacity 在 0.2 到 0.5 之间效果较佳。
- opacity: 0.3 表示 30% 不透明度，70% 透明
- 值越小越透明，但需确保仍可辨识
3. 实际代码示例
以下是一个完整示例：
立即学习“前端免费学习笔记（深入）”；
CSS 部分：
.watermark-container {
position: relative;
width: 100%;
height: 400px;
background: url('your-image.jpg') no-repeat center;
background-size: cover;
}
.watermark {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 40px;
color: #fff;
opacity: 0.3;
pointer-events: none; / 防止水印干扰交互 /
user-select: none; / 禁止选中文本水印 /
white-space: nowrap;
z-index: 10;
}
HTML 部分：
© YourSite.com
4. 图片水印替代方案
若想使用图像而非文字作为水印，可将 .watermark 改为背景图或 img 标签：
.watermark {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('watermark.png') repeat;
opacity: 0.15;
pointer-events: none;
z-index: 10;
}
基本上就这些。absolute 提供灵活定位，opacity 控制视觉干扰，两者结合是实现网页水印的常用且有效方式。
