Текстовый водяной знак на сайте? как это сделать?

Вы можете создать изображение с водяным знаком, а затем установить изображение в качестве фона через CSS.

Например:

<style type = "text/css">
.watermark{background:url(urltoimage.png);}
</style>
<div class = "watermark">
<p>this is some text with the watermark as the background.</p>
</div>

Это должно сработать.

Как было предложено, может работать фон png или даже просто абсолютно позиционированный png, размер которого соответствует странице, но вы спрашиваете в комментарии о том, что было бы хорошим инструментом для его создания - если вы хотите использовать бесплатно, попробуйте GIMP. Создайте холст с прозрачным фоном, добавьте текст, поверните его и измените размер по своему усмотрению, а затем уменьшите непрозрачность слоя по своему вкусу.

Если вы хотите, чтобы он покрыл всю страницу, создайте div с классом «водяной знак» и определите его стиль примерно так:

.watermark
{
   background-image: url(image.png);
   background-position: center center;
   background-size: 100%; /* CSS3 only, but not really necessary if you make a large enough image */
   position: absolute;
   width: 100%;
   height: 100%;
   margin: 0;
   z-index: 10;
}

Если вы действительно хотите, чтобы изображение растянулось по размеру, вы можете пойти немного дальше и добавить изображение в этот div и определить его стиль по размеру (ширина / высота: 100%;).

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

Если вы добавите «background-attachment: fixed» к CSS в предложении Кавендека выше, вы можете «закрепить» фоновое изображение в указанном месте в окне. Таким образом, водяной знак всегда будет оставаться видимым, независимо от того, где пользователь прокручивает страницу.

Лично я считаю, что фиксированные фоновые изображения визуально раздражают, но я слышал, как владельцы сайтов говорят, что им нравится знать, что их логотип или уведомление об авторских правах (которое, вероятно, отображается в виде изображения) всегда находится прямо у пользователя под носом.

<style type = "text/css">
#watermark {
  color: #d0d0d0;
  font-size: 200pt;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: -1;
  left:-100px;
  top:-200px;
}
</style>

Это позволяет вам использовать только текст в качестве водяного знака - хорошо для тестовых версий веб-страницы.

<div id = "watermark">
<p>This is the test version.</p>
</div>