Я разработчик С++/С# и никогда не тратил время на веб-страницы. Я хотел бы поместить текст (случайным образом и по диагонали) большими буквами на фоне некоторых страниц. Я хочу уметь читать текст переднего плана, а также читать "водяной знак". Я понимаю, что это скорее функция выбора цвета.
Я не увенчался успехом в своих попытках сделать то, что хочу. Я бы предположил, что это очень просто для кого-то, у кого есть инструменты веб-дизайна или знания html.
<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>
Как и было предложено, может работать 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.
Вы можете сделать изображение с водяным знаком, а затем установить изображение в качестве фона через 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>
Это должно работать.
Если вы добавили "background-attachment: fixed" в css в предложение kavendek выше, вы можете "привязать" фоновое изображение к указанному месту в окне. Таким образом, водяной знак всегда будет виден независимо от того, где пользователь прокручивает страницу.
Лично я считаю, что фиксированные фоновые изображения визуально раздражают, но я слышал, что владельцы сайтов говорят, что им нравится знать, что их логотип или уведомление об авторских правах (отображаемое как изображение, предположительно) всегда прямо под носом пользователя.