Свойства "цвет" (color) и "фон" (background). Оглавление
Эти свойства описывают цвет (зачастую именуемый как цвет переднего плана) и фон для элемента (т.е. поверхность, на которой располагается содержание). Они позволяют установить цвет фона и(или) его рисунок. Также определяются позиция изображения рисунка фона, повторяется ли он и каким образом, и где он размещается либо перемещается относительно холста.
Свойство "цвет", как правило, наследуется. Свойство "фон" не наследуется, но фон родительского элемента будет виден на просвет, т.к. по умолчанию значение цвета фона для дочерних элементов принимается как "transparent" (прозрачный).
Определение цвета ("color") Вверх
| Значение | <color> | | По умолчанию | Определяется UA | | Область применения | все элементы | | Наследование | есть | | Процентное выражение | неопр. |
Это свойство описывает цвет текста в элементе (зачастую именуемый как цвет переднего плана). Есть несколько разных способов описать, к примеру, красный цвет:
EM { color: red } /* natural language */
EM { color: rgb(255,0,0) } /* RGB range 0-255 */
См. этот раздел для описания возможных значений цвета.
Определение цвета обоев ("background-color"). Вверх
| Значение | <color> | transparent | | По умолчанию | transparent | | Область применения | все элементы | | Наследование | нет | | Процентное выражение | неопр. |
Это свойство описывает цвет обоев элемента.
H1 { background-color: #F00 }
Определение рисунка фона ("background-image"). Вверх
| Значение | <url> | none | | По умолчанию | нет | | Область применения | все элементы | | Наследование | нет | | Процентное выражение | неопр. |
Это свойство определяет рисунок фона элемента. При назначении изображения для рисунка фона, необходимо также определить цвет фона, который будет использоваться в случае недоступности изображения. Если изображение доступно, оно перекрывает цвет фона сверху.
BODY { background-image: url(marble.gif) }
P { background-image: none }
Определение повтора рисунка фона ("background-repeat"). Вверх
| Значение | repeat | repeat-x | repeat-y | no-repeat | | По умолчанию | repeat | | Область применения | все элементы | | Наследование | нет | | Процентное выражение | неопр. |
Если рисунок фона определен, значение свойства "повтор рисунка фона" определяет, повторяется ли изображение и каким образом.
Значение "repeat" указывает, что изображение повторяется как в горизонтальном, так и в вертикальном направлении. Значение "repeat-x" ("repeat-y") устанавливает повтор изображения соответственно только в горизонтальном (вертикальном) направлении, создавая одну полосу из изображений от одного края до противоположного. При значении "no-repeat" изображение не повторяется.
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
}
В вышеприведенном примере изображение рисунка фона повторяется только в вертикальном направлении.
Определение привязки фона ("background-attachment"). Вверх
| Значение | scroll | fixed | | По умолчанию | scroll | | Область приложения | все элементы | | Наследование | нет | | Процентное выражение | неопр. |
Если определен рисунок фона, значение свойства "привязка" ("background-attachment") определяет, привязан ли рисунок к холсту или перемещается вместе с содержанием.
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
background-attachment: fixed;
}
Ядро CSS1: UA вправе рассматривать "fixed" как "scroll". Тем не менее рекомендуется, чтобы они правильно отрабатывали "fixed" по крайней мере для элементов HTML и BODY, т.к. для автора не существует возможности использовать изображение только для браузеров, поддерживающих "fixed". (См. эту главу).
Определение положения фона ("background-position") Вверх
| Значение | [ <percentage> | <length> ]{1,2} | [top | center | bottom] || [left | center | right] | | По умолчанию | 0% 0% | | Область применения | блочные и замещаемые элементы | | Наследование | нет | | Процентное значение | по отношению к стороне самого элемента |
Если рисунок фона был определен, значение свойства "положение фона" определяет его начальное расположение.
При парном значении "0% 0%", верхний левый угол изображения устанавливается в верхнем левом углу поля, окружающего содержание элемента (т.е. не того поля, что окружает отступ, рамку или границу). При парном значении "100% 100%", нижний правый угол изображения устанавливается в нижнем правом углу элемента. При парном значении "14% 84%", точка изображения 14% вправо и 84% вниз будет установлена на точке элемента 14% вправо и 84% вниз.
При парном значении "2cm 2cm", верхний левый угол изображения будет установлен на расстоянии 2 см правее и 2 см ниже верхнего левого угла элемента.
Если задано только одно процентное выражение или абсолютные единицы, они устанавливают только горизонтальное положение, а вертикальное по умолчанию будет 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%".
примеры:
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% */
Если рисунок фона привязан относительно холста (см. раздел "Определение привязки фона"), изображение устанавливается относительно холста, но не элемента. К примеру:
BODY {
background-image: url(logo.png);
background-attachment: fixed;
background-position: 100% 100%;
}
В вышеприведенном примере изображение устанавливается в нижний правый угол холста.
Определение свойств фона в целом ("background") Вверх
| Значение | <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> | | По умолчанию | для обобщающего свойства не определено | | Область приложения | все элементы | | Наследование | нет | | Процентное выражение | применительно к |
Свойство "фон" ("background") - это обобщающее свойство для установки отдельных свойств фона (т.е. цвета, рисунка, повтора, привязки и положения) в одном правиле таблицы стилей.
Возможные значения обобщающего свойства "фон" включают совокупность возможных значений каждого из составляющих свойств.
BODY { background: red }
P { background: url(chess.png) gray 50% repeat fixed }
Свойство "фон" всегда устанавливает все совокупные свойства фона сразу. В первой строке вышеуказанного примера явно задан только цвет фона, а значения остальных свойств принимаются по умолчанию. Во второй строке все совокупные свойства заданы явным образом.
1 2 3 4 5 6
8 8 8
| |
*
Обратная связь