Урок №10: Оформление элементов при помощи CSS - HTML - Каталог статей

Урок №10: Оформление элементов при помощи CSS

Настройка фона элементов

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

Настройки фона элемента со всеми возможными вариантами значений и комментариями собраны в следующей таблице:

Свойство	Значения	Описание	Пример
background-color	название или номер цвета	цвет фона	body {background-color: rgb(128,0,255)}
background-image	url(адрес)	фоновое изображение	p {background-image: url(../picture3.gif)}
background-attachment	fixed scroll	закрепление фонового изображения	div {background-attachment: fixed}
background-repeat	repeat repeat-x repeat-y no-repeat	повторение фонового изображения	div {background-repeat: repeat-x}
background-position	x y в пикселах или процентах	позиционирование фонового изображения	p {background-position: 50% 15px}

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

Если задано только одно значение, в процентах или единицах измерения, то оно устанавливает только горизонтальную позицию, вертикальная позиция будет 50%. Если заданы два значения, первое задаёт горизонтальную позицию. Допускаются комбинации значений в процентах и единицах измерения (например, '50% 2cm'). Допускаются негативные значения позиции. Ключевые слова не могут комбинироваться со значениями в процентах или единицах измерения (все возможные сочетания приведены ниже).

top left и left top	То же, что '0% 0%'.
top, top center и center top	То же, что '50% 0%'.
right top и top right	То же, что '100% 0%'.
left, left center и center left	То же, что '0% 50%'.
center и center center	То же, что '50% 50%'.
right, right center и center right	То же, что '100% 50%'.
bottom left и left bottom	То же, что '0% 100%'.
bottom, bottom center и center bottom	То же, что '50% 100%'.
bottom right и right bottom	То же, что '100% 100%'.

Существует сокращенное свойство background, позволяющее настроить все свойства фона элемента в одном месте таблицы стилей. Значение этого стилевого свойства представляет собой список значений отдельных свойств, заданных в определенном порядке и разделенных пробелами.

Значения стилевого свойства 'background' указываются в следующем порядке:

background-color background-image background-repeat background-attachment background-position

Пример использования свойства background:

p { background: url("chess.png") gray 50% repeat fixed }

Интересный пример настройки фона элемента

Существует множество способов, не позволяющих пользователю сохранять изображения, размещенные на веб-странице. И такое же количество приемов сохранения подобных изображений. :) На одном из сайтов я столкнулась с очень изящным решением, которое было основано только на CSS, без привлечения JavaScript и более сложных технологий. Повторю, что подобные способы являются скорее "защитой от ламеров" - достаточно компетентный специалист, вероятно, найдет способ преодоления запретов. В крайнем случае, Print Screen пока еще не отменен. :)

Попробуйте сохранить изображение, приведенное ниже.

Как вы, я думаю, уже заметили, вместо желаемого изображения сохраняется прозрачный однопиксельный GIF. Как же реализуется такой прием? Если в двух словах, то цветное изображение представляет собой фон какого-либо элемента (в нашем случае, это элемент div). А содержимым элемента является никому не нужный прозрачный GIF, растянутый до нужного размера. Он прозрачный, поэтому не мешает созерцать изображение, он растянут до размеров подложки - поэтому не дает добраться до заветного контекстного меню "Сохранить фон как...". Есть только один способ преодоления такой защиты - просмотреть код и найти адрес картинки, которую впоследствии можно загрузить, введя найденный адрес в адресную строку броузера. А вот и код:

Листинг №10.1.1:

....
<style type="text/css">
div.hide {
 background: url("../images/color.jpg") gray no-repeat; 
 width:400px;
 height:300px;
 } 
</style>
...
 
<div class="hide">
<img src="../images/spacer.gif" width="400" height="300" alt="Сохрани меня" border="0" />
</div>

Категория: HTML | Добавил: slava (18.07.2009)

Просмотров: 1661 | Рейтинг: 0.0/0

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]