Добавить эффект «Водяной знак» с помощью 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.

Answer 4

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