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

Я разработчик С++/С# и никогда не тратил время на веб-страницы. Я хотел бы поместить текст (случайным образом и по диагонали) большими буквами на фоне некоторых страниц. Я хочу уметь читать текст переднего плана, а также читать "водяной знак". Я понимаю, что это скорее функция выбора цвета.

Я не увенчался успехом в своих попытках сделать то, что хочу. Я бы предположил, что это очень просто для кого-то, у кого есть инструменты веб-дизайна или знания html.

Ответ 1

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

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

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

Ответ 2

Как и было предложено, может работать 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 и определить его стиль для соответствия (width/height: 100%;).

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

Ответ 3

Вы можете сделать изображение с водяным знаком, а затем установить изображение в качестве фона через 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>

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

Ответ 4

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

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