текстовый водяной знак на сайте? как это сделать? - PullRequest
Новая
       18

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

12 голосов
/ 16 сентября 2008

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

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

Ответы [ 4 ]

24 голосов
/ 21 марта 2010 
<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>
7 голосов
/ 16 сентября 2008

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

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

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

3 голосов
/ 16 сентября 2008

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

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

2 голосов
/ 16 сентября 2008

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

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

...