Добавить эффект “Водяного знака” с CSS?

Вы уверены, что хотите использовать водяные знаки на стороне клиента? Это по сути сводит на нет всю цель создания водяного знака. Что вам нужно сделать, так это отправить на сервер изображение, которое уже содержит водяной знак. Для этого вам придется написать код на стороне сервера.

Ваше решение:

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.

Вы потенциально можете использовать прозрачный PNG для наложения двух изображений, но вы действительно хотите сделать это на сервере, поскольку клиентские решения легко разрушаются и на самом деле ничего не защищают.

Есть как минимум два способа сделать это, один из которых как бы затронут в ответе @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
   | /\          /    \    ||    |
   |/  \________/      \_()||_()(|
   +-----------------------------+

Альтернативный способ, предполагающий, что все, что вы хотите «водяные знаки» - это «один word, 'означает использование слов :

<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
   | /\          /    \    ||    |
   |/  \________/      \_()||_()(|
   +-----------------------------+

Я понимаю, что на этот вопрос, вероятно, был дан ответ к вашему удовлетворению, но я надеюсь, что это будет полезно для вас, хотя бы только в качестве общей информации.