CSS如何给网页图片添加水印？

下面我将从基础到高级，为你详细介绍几种使用 CSS 实现图片水印的方法,并分析它们的优缺点和适用场景。

使用 :before 或 :after 伪元素（最常用、最推荐）

这是实现水印最流行和灵活的方法，它利用 CSS 伪元素在图片容器内创建一个绝对定位的图层，然后将水印内容（文字或图标）放在这个图层上。

核心思路：

1. 创建一个 <div> 作为图片的容器，并设置 position: relative。
2. 将 <img> 标签放入这个容器中。
3. 使用 :before 或 :after 伪元素，设置其为 position: absolute,覆盖在整个图片上。
4. 在伪元素中添加水印文字，并设置样式（颜色、透明度、字体等）。

示例代码：

HTML 结构

<div class="image-with-watermark">
  <img src="your-image.jpg" alt="带水印的图片">
</div>

CSS 样式

.image-with-watermark {
  position: relative; /* 1. 设置为相对定位，作为伪元素的参考 */
  display: inline-block; /* 让容器大小适应图片 */
  max-width: 100%; /* 响应式设计 */
}
.image-with-watermark img {
  display: block; /* 避免图片下方出现间隙 */
  width: 100%;
  height: auto;
}
/* 2. 使用 ::after 伪元素创建水印 */
.image-with-watermark::after {
  content: "© 版权所有"; /* 3. 水印内容 */
  position: absolute; /* 4. 绝对定位 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 5. 实现完美居中 */
  /* 水印样式 */
  color: rgba(255, 255, 255, 0.6); /* 白色，60% 透明度 */
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 添加阴影，提高可读性 */
  pointer-events: none; /* 防止水印遮挡图片的鼠标事件 */
}

优点：

• 非侵入性：不修改原始 HTML <img> 标签,结构清晰。
• 灵活性高：可以轻松控制水印的位置、大小、颜色、旋转角度等。
• 易于维护：所有样式都在 CSS 中修改,非常方便。
• 性能好：纯 CSS 实现，不会增加额外的 HTTP 请求。

缺点：

• 需要一个额外的容器 <div>。

直接在图片上叠加一个 <div>（与方法一类似）

这种方法与方法一的原理完全相同，只是不使用伪元素，而是直接在 HTML 中写一个 <div> 元素来作为水印层，在某些情况下，如果水印内容非常复杂或需要交互,这种方法可能更直观。

示例代码：

HTML 结构

<div class="image-container">
  <img src="your-image.jpg" alt="带水印的图片">
  <div class="watermark-text">© 版权所有</div>
</div>

CSS 样式

.image-container {
  position: relative;
  display: inline-block;
}
.image-container img {
  display: block;
  width: 100%;
  height: auto;
}
.watermark-text {
  position: absolute;
  bottom: 20px; /* 定位在右下角 */
  right: 20px;
  color: rgba(255, 255, 255, 0.7);
  background-color: rgba(0, 0, 0, 0.3); /* 加个半透明背景 */
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 1rem;
}

优点：

• 非常直观，HTML 结构和水印内容一目了然。
• 如果水印内容来自动态数据（如 JavaScript）,这种方法更容易操作。

缺点：

• 增加了 HTML 的“脏度”,不如伪元素简洁。

使用 background-image 和 background-blend-mode（高级技巧）

这种方法非常巧妙，它利用了背景图片和背景混合模式，你可以将一张带有水印的透明 PNG 图片作为背景,然后与主图片进行混合。

核心思路：

1. 创建一个容器。
2. 将目标图片作为容器的 background-image。
3. 将水印图片（通常是 PNG 格式，背景透明）作为容器的第二个 background-image。
4. 使用 background-blend-mode 来控制两个图层如何混合。

示例代码：

HTML 结构

<div class="image-blend-watermark"></div>

CSS 样式

.image-blend-watermark {
  width: 500px;
  height: 333px; /* 需要设定一个固定的高度或宽高比 */
  /* 1. 主图片作为背景 */
  background-image: url('your-image.jpg');
  background-size: cover;
  background-position: center;
  /* 2. 水印图片作为第二个背景 */
  background-image: url('watermark-logo.png'), url('your-image.jpg');
  background-size: cover, cover;
  background-position: center, center;
  /* 3. 设置混合模式 */
  background-blend-mode: overlay, normal; /* 第一个背景（水印）使用 overlay 模式，第二个（主图）正常显示 */
}

注意：background-blend-mode 的兼容性在现代浏览器中已经很好,但在一些旧版浏览器中可能不支持。

优点：

• 效果专业：可以创建非常精美的、设计感强的水印（如 Logo 水印）。
• 性能优异：同样是纯 CSS,性能很好。

缺点：

• 需要准备水印图片：你不能直接用文字,必须提前制作好一张透明背景的水印图片。
• 兼容性问题：background-blend-mode 在非常旧的浏览器中不被支持。
• 灵活性较低：不如伪元素方法那样可以随意调整文字内容。

使用 mask-image（现代、前沿）

mask-image 属性允许你使用一个图片（或渐变）作为“遮罩”来控制元素的可见部分,我们可以用它来实现水印效果。

核心思路：

1. 准备一张带有水印图案的黑白图片（白色代表可见，黑色代表透明）。
2. 将这张图片作为 mask-image 应用到图片上。

示例代码：

HTML 结构

<img class="image-mask-watermark" src="your-image.jpg" alt="带水印的图片">

CSS 样式

.image-mask-watermark {
  width: 100%;
  height: auto;
  /* 使用遮罩图片 */
  -webkit-mask-image: url('watermark-pattern.png'); /* 为 Safari 和 Chrome 旧版添加前缀 */
  mask-image: url('watermark-pattern.png');
  /* 遮罩的尺寸和位置 */
  -webkit-mask-size: 50% 50%; /* 水印图案的大小 */
  mask-size: 50% 50%;
  -webkit-mask-repeat: repeat; /* 让水印图案重复平铺 */
  mask-repeat: repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
}

优点：

• 效果独特：可以实现平铺的、图案化的水印效果。
• 不修改原始图片。

缺点：

• 实验性特性：mask-image 仍然是一个实验性的 CSS 属性，虽然主流浏览器支持良好，但需要添加浏览器前缀,并且未来标准可能变动。
• 需要准备遮罩图片：比准备普通水印图片更复杂。

总结与选择建议

对于绝大多数网页设计需求，方法一（:after 伪元素）是最佳选择，它简单、可靠、灵活，能满足大部分水印需求,并且有最好的浏览器兼容性。