如何使用CSS3伪元素构建文章水印背景

# 如何使用CSS3伪元素构建文章水印背景

在网页设计中，为文章添加水印背景既能提升视觉层次感，又能保护内容版权。CSS3的伪元素（`::before` 和 `::after`）为此提供了轻量级解决方案，无需额外HTML标签即可实现。下面我们将分步骤解析实现方法。

---

## 一、伪元素基础概念
伪元素是CSS3提供的虚拟元素，允许开发者通过CSS在DOM中插入装饰性内容：
- `::before`：在目标元素内容前插入
- `::after`：在目标元素内容后插入

```css
.article::before {
  content: "";
  /* 其他样式属性 */
}

二、实现水印背景的核心步骤

1. 创建基础结构

假设HTML结构如下：

<article class="watermarked">
  <h1>文章标题</h1>
  <p>这里是正文内容...</p>
</article>

2. 通过伪元素添加水印

.watermarked {
  position: relative;
  padding: 2em;
}

.watermarked::before {
  content: "DRAFT"; /* 水印文字 */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.15;
  font-size: 3em;
  font-weight: bold;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* 防止影响交互 */
  transform: rotate(-30deg); /* 倾斜效果 */
  z-index: -1; /* 置于内容下方 */
}

3. 关键属性说明

• position: absolute：使水印覆盖整个容器
• z-index: -1：确保文字内容在上层
• pointer-events: none：允许穿透点击
• transform: rotate()：经典水印倾斜效果
• opacity：控制透明度避免喧宾夺主

三、进阶技巧

1. 多水印平铺效果

.watermarked::before {
  content: "";
  background-image: 
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 100px,
      rgba(0,0,255,0.1) 100px,
      rgba(0,0,255,0.1) 200px
    );
}

2. 图片水印

.watermarked::after {
  content: "";
  background: url(watermark.png) center/contain no-repeat;
  /* 其他定位属性同上 */
}

3. 响应式调整

@media (max-width: 768px) {
  .watermarked::before {
    font-size: 1.5em;
    transform: rotate(-15deg);
  }
}

四、注意事项

1. 内容可访问性：确保水印不影响正文阅读
2. 性能优化：避免复杂图形导致重绘
3. 浏览器兼容性：伪元素在IE8+支持（需单冒号写法）

通过这种纯CSS实现方式，既能保持HTML结构整洁，又便于后期维护调整。开发者可以根据实际需求组合透明度、旋转角度和布局方式，创造出各种风格的水印效果。 “`

（全文约650字）