Добавить эффект "Watermark" с помощью CSS?

Ответ 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
   | /\          /    \    ||    |
   |/  \________/      \_()||_()(|
   +-----------------------------+

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

Ответ 2

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

Ответ 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.

Ответ 4

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