|
||
|
aranea.ru || Спецификация CSS2 | 14.2. Фон.
14.2. Фон.14.2.1. Свойства фона: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position' и 'background'Авторы могут определить фон элемента (т.е. визуализацию его поверхности) либо как цвет, либо как изображение. В терминах блочной модели, "фон" относится к фону содержания и областям отступов. Цвет границ и их стиль устанавливаются свойствами границ. Поля всегда прозрачны, так что фон родительского блока всегда просвечивает. Свойства фона не наследуются, но фон родительского фона будет просвечивать по умолчанию, из-за начального значения 'transparent' для 'background-color'. Фон блока, сгенерированного корневым элементом, покрывает всю канву. Для HTML-документов мы рекомендуем, чтобы авторы определяли фон для элемента BODY, а не для других элементов HTML. Устройства вывода должны следовать следующим правилам предшествования для заполнения фона: если значение свойства 'background' для HTML-элементов отличается от 'transparent', то использовать его, в другом случае использовать значение свойства 'background' для элемента BODY. Если результирующее значение – 'transparent', то визуализация не определена. В соответствии с этими правилами, канва нижележащего HTML-документа будет иметь фон "marble" ("мраморный"):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Setting the canvas background</TITLE>
<STYLE type="text/css">
BODY { background: url("http://style.com/marble.png") }
</STYLE>
</HEAD>
<BODY>
<P>My background is marble.
</BODY>
</HTML>
14.2.1. Свойства фона: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position' и 'background''background-color' Тип значения: <color> | transparent | inherit Начальная величина: transparent Применяется: ко всем элементам Наследование: нет Процентная база: нет Медиа: визуальные Это свойство устанавливает цвет фона элемента либо значением <color>, либо ключевым словом 'transparent', которое делает лежащий в основе цвет прозрачным.
H1 { background-color: #F00 }
'background-image' Тип значения: <uri> | none | inherit Начальная величина: none Применяется: ко всем элементам Наследование: нет Процентная база: нет Медиа: визуальные Это свойство устанавливает фоновое изображение элемента. При определении фонового изображения, авторам необходимо указать цвет, который будет использоваться, когда изображение недоступно. Когда изображение доступно, оно визуализируется поверху фонового цвета. (Таким образом, цвет виден в прозрачной части изображения). Значениями для этого свойства являются либо <uri> для определения изображения, либо 'none', когда не используется изображение.
BODY { background-image: url("marble.gif") }
P { background-image: none }
'background-repeat' Тип значения: repeat | repeat-x | repeat-y | no-repeat | inherit Начальная величина: repeat Применяется: ко всем элементам Наследование: нет Процентная база: нет Медиа: визуальные Если определяется фоновое изображение, то это свойство устанавливает, повторяется ли изображение (мозаичное расположение) и каким образом. Мозаичное расположение покрывает области содержания и отступов блока. Свойство имеет значения:
BODY {
background: white url("pendant.gif");
background-repeat: repeat-y;
background-position: center;
}
 [D]'background-attachment' Тип значения: scroll | fixed | inherit Начальная величина: scroll Применяется: ко всем элементам Наследование: нет Процентная база: нет Медиа: визуальные Если определяется фоновое изображение, то это свойство устанавливает, фиксируется ли оно с учетом демонстрационного окна ('fixed'), или осуществляется его скроллинг вместе с документом ('scroll'). Даже если изображение фиксируется, то оно все же видно, когда находится на фоне или в области отступа элемента. Таким образом, если изображение не расположено мозаично ('background-repeat: repeat'), то оно может быть невидимым. Этот пример создает бесконечную вертикальную полосу, которая остается склеенной ("glued") с демонстрационным окном, когда осуществляется скроллинг элемента.
BODY {
background: red url("pendant.gif");
background-repeat: repeat-y;
background-attachment: fixed;
}
Устройства вывода могут управлять 'fixed', как 'scroll'. Но, рекомендуется, чтобы они интерпретировали 'fixed' корректно хотя бы для элементов HTML и BODY, так как нет возможности, чтобы автор предоставлял изображение только для таких браузеров, которые поддерживают 'fixed'. Смотрите согласование для подробной информации.
'background-position'
Тип значения: [ [<percentage> | <length> ]{1,2} |
[ [top | center | bottom] || [left | center |
right] ] ] | inherit
Начальная величина: 0% 0%
Применяется: к блочным и замещаемым элементам
Наследование: нет
Процентная база: ссылается на размер самого блока
Медиа: визуальные
Если определяется фоновое изображение, то это свойство устанавливает его начальное положение. Значения этого свойства:
Если дано только одно значение в процентах или одно значение длинны, то оно определяет только горизонтальное положение, а вертикальная позиция будет 50%. Если дано два значения, то горизонтальная позиция идет первой. Разрешены комбинации значений с длинной и процентами (например, '50% 2cm'). Разрешаются отрицательные положения. Ключевые слова не могут комбинировать процентные значения и значения длинны (все возможные комбинации даны выше).
BODY { background: url("banner.jpeg") right top } /* 100% 0% */
BODY { background: url("banner.jpeg") top center } /* 50% 0% */
BODY { background: url("banner.jpeg") center } /* 50% 50% */
BODY { background: url("banner.jpeg") bottom } /* 50% 100% */
Если фоновое изображение фиксируется внутри демонстрационного окна (смотрите свойство 'background-attachment'), то изображение размещается относительно демонстрационного окна, вместо области отступа элемента. Например,
BODY {
background-image: url("logo.png");
background-attachment: fixed;
background-position: 100% 100%;
background-repeat: no-repeat;
}
В указанном выше примере, (одно) изображение помещается в нижний правый угол демонстрационного окна.
'background'
Тип значения: [ <'background-color'> || <'background-image'> ||
<'background-repeat'> || <'background-attachment'> ||
<'background-position'>] | inherit
Начальная величина: не определяется для сокращенных свойств
Применяется: ко всем элементам
Наследование: нет
Процентная база: позволяется для 'background-position'
Медиа: визуальные
Свойство 'background' является сокращенным свойством для набора индивидуальных свойств фона (т.е. 'background-color', 'background-image', 'background-repeat', 'background-attachment' и 'background-position') в одном месте стилевой таблице. Свойство 'background', во-первых, устанавливает индивидуальные свойства фона на их начальные значения, а затем присваивает точные значения, данные в декларации. В первом правиле следующего примера, дано только значение 'background-color', а другие индивидуальные свойства установлены на их начальных значениях. Во втором правиле, определяются все индивидуальные свойства.
BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }
|
