Самоучитель по креативному веб-дизайну. Книга 2, стр.13

В отличие от квадратного изображения размерами 50×50 пикселей, которое использовалось для создания текстурного фона, изображение «водяного знака»

должно иметь большие’размеры. Например, при необходимости использования в качестве «водяного знака» логотипа компании изображение логотипа должно

быть таким, каким оно должно выводиться на странице (см. рис. 4.18).

214 Глава 4. Каскадные списки стилей





Рис. 4.18. Web-страница с логотипом компании (лампочкой) в качестве «водяного знака»

Для помещения «водяного знака» в центр фона Web-страницы добавьте в спи- сок стилей следующее правило:

body {background-image:URL(images/LightBulb. gif) ;

background-repeat:no-repeat;

background-position:center;

background-attachment:fixed} . . ,

Как и в случае с текстурным фоном из предыдущего примера, свойство

background-image устанавливает имя файла графического изображения, которое будет использоваться в качестве «водяного знака». В приведенном выше примере Web-браузер будет выводить на экран изображение из файла LightBulb. gif. Если вы хотите поместить на страницу другое изображение, замените images/ LightBulb. gif относительным адресом и именем файла изображения своего «во —

дяного знака». Значение no-repeat свойства background-repeat указывает Web — браузеру выводить на страницу только одну копию изображения. Свойство background-position используется для задания положения изображения на

странице, а значение fixed свойства background-attachment позволяет удержи — вать «водяной знак» во время пролистывания содержимого страницы.

Как вы, наверное, догадываетесь, «водяной знак» можно размещать не только

в центре Web-страницы. Синтаксис каскадных списков стилей предоставляет три метода указания местоположения «водяного знака»: с помощью ключевого слова,

с использованием единиц длины и процентных значений. Для позиционирова — ния «водяного знака» с помощью ключевого слова применяются значения top, bottom, left, righ t и (как было продемонстрировано в примере) center. Таким

образом, для помещения «водяного знака» (фактически любого графического

изображения) в нижний левый угол фона Web-страницы необходимо следующим —

образом установить СВОЙСТВО background-position:



background-position:bottom right;



Использование единиц длины для позиционирования «водяного знака» пре —

доставляет четкий контроль над его положением на странице. Для указания рас — стояния «водяного знака» от верхнего левого угла страницы можно воспользо —

Глава 4. Каскадные списки стилей. 21 5





ваться любыми единицами длины, имеющимися в каскадных списках стилей.

Например, для вывода «водяного знака» на экран на расстоянии 70 пикселей от левого края и на расстоянии 100 пикселей от верхнего края страницы можно

ВОСПОЛЬЗОВатЬСЯ СЛедуЮЩИМ Объявлением СВОЙСТВа background-position. *



background-position:7Ор х ЮОрх;

Обратите внимание, что сначала указывается расстояние от левого, а затем от верхнего края страницы.

Процентные значения, используемые для позиционирования фоновых изоб —

ражений, аналогичны по своей функции единицам длины. Тем не менее, вместо точного задания положения верхнего левого угла изображения, указывается рас — стояние между изображениями и краями страницы в процентах от соответствую- щих размеров окна Web-браузера. Например, для помещения изображения на расстоянии 25% ширины окна от левого края страницы и 50% высоты окна от верх- него края страницы объявите свойство background-position следующим образом:



background-position:25% 50%



Обратите внимание, что при изменении размера окна браузера положение «водяного знака» будет меняться с целью сохранения постоянных процентных значений положения изображения на Web-странице.



Плавающие изображения и текст

На большинстве Web-страницы присутствуют как текст, так и изображения. Несмотря на то что старая поговорка о том, что одна картина может стоить ты — сячи слов, справедлива и сейчас, тем не менее, в сети Web изображения пока еще не заменили слов. Фактически страница, содержащая только изображения,

google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru

Оставить комментарий

Вы должны авторизоваться для отправки комментария.

Полезные ссылки
Случайные записи
  • 10.03.2011">Руководство по actionscript. часть 4, стр. 039
  • 02.03.2011">Руководство по actionscript. часть 5, стр. 088
  • 07.03.2011">Руководство по actionscript. часть 4, стр. 113
  • 08.03.2011">Руководство по actionscript. часть 4, стр. 073
  • 01.01.2010">14 бесплатных шрифтов в стиле Web 2.0
  • 17.03.2011">Руководство по actionscript. часть 2, стр. 157
  • 03.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.94
  • 23.07.2011">Chrome OS
  • 17.03.2011">Руководство по actionscript. часть 2, стр. 149
  • 20.03.2011">Руководство по actionscript. часть 2, стр. 078
  • 06.07.2011">Технология Active X на страницах сайта
  • 14.03.2011">Руководство по actionscript. часть 3, стр. 075
  • 09.03.2011">Руководство по actionscript. часть 4, стр. 058
  • 09.03.2010">Бесплатная векторная графика
  • 24.02.2011">Руководство по actionscript. часть 6, стр. 108
Опрос

Какие цвета вы предпочитаете?

View Results

Loading ... Loading ...