css实现前端水印

news2024/11/13 12:36:24

单处水印

代码

   <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Watermark Example</title>
  <style>
    .watermark-container {
      position: relative;
      width: 300px; 
      height: 200px; 
      border: 1px solid #ccc;
      background-color: #f0f0f0; 
    }
    
    .watermark-container::before {
      content: "真的服了";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(-45deg);
      font-size: 2em;
      color: rgba(0, 0, 0, 0.1); 
      pointer-events: none; 
      white-space: nowrap;
    }
  </style>
</head>
<body>
  <div class="watermark-container">
    这里是带有水印的内容
  </div>
</body>
</html>

效果：

多处水印

多处水印的实现，实际上传就是创建了一张svg格式的图片，再将这张图片作为背景图来实现。水印的具体细节可以调节svg的相关属性来实现

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Watermark Example</title>
  <style>
    .watermark-container {
      position: relative;
      width: 100%; 
      height: 100vh; 
      border: 1px solid #ccc;
      background-color: #f0f0f0; 
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' font-size='30' fill='rgba(0,0,0,0.1)' transform='rotate(-45 150 150)'>真的服了</text></svg>");
      background-repeat: repeat;
      pointer-events: none; 
    }
  </style>
</head>
<body>
  <div class="watermark-container">
    这里是带有水印的内容
  </div>
</body>
</html>