用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 */
}

这应该生成如下内容:

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

另一种方法,假设所有你想要'水印'是'一个字',是使用单词:

<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 */
}

这应该生成如下内容:

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

我意识到这个问题可能会让你满意,但我希望这对你有用,即使只是作为一般信息.

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 lib。