用 CSS 添加“水印”效果？

Question

我在 div 中有一张图片。我需要添加一个水印效果，或者基本上是另一个图像，覆盖在 div 的图像之上。我怎么能用css做到这一点？

示例代码：

<div id="image">
</div>

css:

#image {
   background:url(images/images.png) no-repeat;
}

Answer 1

至少有两种方法可以做到这一点，其中一种已经被@erenon 的回答所触及。

为了满足您的要求并使用图片：

<div id="image">
    <img src="path/to/watermarking_image.png" alt="..." />
</div>

使用以下 CSS：

#image {
/* the image you want to 'watermark' */
height: 200px; /* or whatever, equal to the image you want 'watermarked' */
width: 200px; /* as above */
background-image: url(path/to/image/to/be/watermarked.png);
background-position: 0 0;
background-repeat: no-repeat;
position: relative;
}

#image img {
/* the actual 'watermark' */
position: absolute;
top: 0; /* or whatever */
left: 0; /* or whatever, position according to taste */
opacity: 0.5; /* Firefox, Chrome, Safari, Opera, IE >= 9 (preview) */
filter:alpha(opacity=50); /* for <= IE 8 */
}

#image {
  /* the image you want to 'watermark' */
  height: 200px;
  /* or whatever, equal to the image you want 'watermarked' */
  width: 200px;
  /* as above */
  background-image: url(https://www.davidrhysthomas.co.uk/linked/astrid_avatar.png);
  background-position: 0 0;
  background-repeat: no-repeat;
  position: relative;
}

#image img {
  /* the actual 'watermark' */
  position: absolute;
  top: 0;
  /* or whatever */
  left: 0;
  /* or whatever, position according to taste */
  opacity: 0.5;
  /* Firefox, Chrome, Safari, Opera, IE >= 9 (preview) */
  filter: alpha(opacity=50);
  /* for <= IE 8 */
}

<div id="image">
  <img src="https://www.davidrhysthomas.co.uk/linked/watermark.png" alt="..." />
</div>

这应该会生成如下内容：

   +--------------+--------------+
   |              |              |
   | 'watermark'  |              |
   |              |        __    |
   +--------------+       /  \   |
   |                     (    )  |
   |               /\     \  /   |
   |              /  \     ||    |   <-- Picture. Of...something. O_o
   | /\          /    \    ||    |
   |/  \________/      \_()||_()(|
   +-----------------------------+

另一种方法，假设你想要“加水印”的只是“一个词”，那就是使用 words：

<div id="image">
    <p>Watermark text</p>
</div>

还有以下 CSS：

#image {
/* the image you want to 'watermark' */
height: 200px; /* or whatever, equal to the image you want 'watermarked' */
width: 200px; /* as above */
background-image: url(path/to/image/to/be/watermarked.png);
background-position: 0 0;
background-repeat: no-repeat;
position: relative;
}

#image p {
/* the actual 'watermark' */
position: absolute;
top: 0; /* or whatever */
left: 0; /* or whatever, position according to taste */
opacity: 0.5; /* Firefox, Chrome, Safari, Opera, IE >= 9 (preview) */
filter:alpha(opacity=50); /* for <= IE 8 */
}

#image {
  width: 200px;
  height: 200px;
  background-image: url(https://www.davidrhysthomas.co.uk/linked/astrid_avatar.png);
  background-position: 0 0;
  background-repeat: no-repeat;
  position: relative;
}

#image p {
  /* the actual 'watermark' */
  position: absolute;
  top: 0;
  /* or whatever */
  left: 0;
  /* or whatever, position according to taste */
  opacity: 0.5;
  /* Firefox, Chrome, Safari, Opera, IE >= 9 (preview) */
  filter: alpha(opacity=50);
  /* for <= IE 8 */
}

<div id="image">
  <p>Watermark text</p>
</div>

这应该会生成如下内容：

   +--------------+--------------+
   |              |              |
   |  watermark   |              |
   |    text      |        __    |
   +--------------+       /  \   |
   |                     (    )  |
   |               /\     \  /   |
   |              /  \     ||    |   <-- Picture. Of...something. O_o
   | /\          /    \    ||    |
   |/  \________/      \_()||_()(|
   +-----------------------------+

我知道这个问题的回答可能令您满意，但我希望这对您有所帮助，即使只是作为一般信息。

已更新以添加 SVG 选项，但请记住，在此示例中，“水印”文本是可选的，并且可以检查 SVG 元素以检索图像 URL：

svg {
  width: 300px;
  height: 300px;
  border: 2px solid #000;
}

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <style>
    /* adjusting the fill, colour and transparency,
       of the watermark text while the SVG is hovered */
    svg:hover .watermark {
      fill: #666f;
      font-size: 2.1em;
    }
    /* defining the default style of the watermark */
    .watermark {
      fill: #bbbb;
      font-size: 2em;
      font-family: Ubuntu, Calibri, sans-serif;
      font-weight: bold;
      transition: all 0.3s linear;
    }
  </style>
  <!-- the image that you want to be watermarked: -->
  <image xlink:href="http://www.davidrhysthomas.co.uk/linked/astrid_avatar.png" height="200px" width="200px" />
  <!-- the watermark text: -->
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" class="watermark">watermark</text>
</svg>

Answer 2

您确定要在客户端添加水印吗？这样做基本上违背了拥有水印的全部目的。您想要做的是提供已经包含水印的图像。这样做，您将不得不编写服务器端代码。

Answer 3

您的解决方案：

CSS：

#watermark{
   background:url(images/watermark.png) no-repeat; 
   width: 100px;
   height: 100px;
   position: relative;
   top: 0;
   left: 0;
}
#image{
   width: 100px;
   height: 100px;
   position: relative;
   top: 0;
   left: 0;
}

HTML：

<div>
<div id="image"><img src="..." /></div>
<div id="watermark"></div>
</div>

更好的解决方案：

有些人无法突破叠加水印，但有些人可以。强烈建议使用服务器端水印，例如：imagemagick 库。

Answer 4

您可能会使用透明 PNG 来覆盖两个图像，但您确实希望在服务器上执行此操作，因为基于客户端的解决方案很容易被击败并且不能真正保护任何东西。