Цвет и фон Flashcards
background-clip
(фоновый клип)
Определяет, как цвет фона или фоновая картинка должна выводиться под границами. Эффект заметен при прозрачных или пунктирных границах.
background-clip: border-box;
Значения
padding-box
Фон отображается внутри границ.
border-box
Фон выводится под границами.
content-box
Фон отображается только внутри контента.
Значений может быть несколько (для каждого из множественных фоновых рисунков), при этом значения разделяются между собой запятой.
Результат использования значений свойства background-clip для элемента с пунктирной рамкой толщиной 10 пикселов показан на рис. 1.
Синтаксис
background-clip: [padding-box | border-box | content-box] [, [padding-box | border-box | content-box]]
background-position-y (-x)
(положение фона)
Задает положение фонового изображения внутри элемента по вертикали (-x горизонтали). Свойство background-position-y является нестандартным и не входит в спецификацию CSS.
background-position-y: bottom;
Значения
top
Выравнивает фон по верхнему краю. Эквивалент записи 0 или 0%.
center
Выравнивает фон по центру вертикали. Эквивалент записи 50%.
bottom
Выравнивает фон по нижнему краю. Эквивалент записи 100%.
проценты
Задает положение фона в процентах от высоты элемента. Значение 0% или 0 выравнивает верхний край фонового изображения по верхнему краю элемента. Значение 100% выравнивает нижний край рисунка по нижнему краю элемента.
значение
Задает положение фона в любых доступных для CSS единицах — пикселы (px), сантиметры (cm), em и др. относительно верхнего края элемента.
Синтаксис
background-position-y: top | center | bottom | проценты | значение
background-origin
(происхождение фона)
Свойство background-origin определяет область позиционирования фонового рисунка. Это свойство не применяется, когда значение background-attachment задано как fixed.
background-origin: content-box;
Значения
padding-box
Фон позиционируется относительно края элемента с учетом толщины границы.
border-box
Фон позиционируется относительно границы, при этом линия границы может перекрывать изображение.
content-box
Фон позиционируется относительно содержимого элемента.
Значений может быть несколько (для каждого из множественных фоновых рисунков), при этом значения разделяются между собой запятой.
Синтаксис
background-origin: [padding-box | border-box | content-box] [, [padding-box | border-box | content-box]]*
color
(цвет)
Определяет цвет текста элемента.
color: red;
inherit
Наследует значение родителя.
Синтаксис
color: цвет | inherit
background-attachment
(фоновое вложение)
Свойство background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом. В CSS3 можно указать несколько значений для ряда фоновых изображений, перечисляя значения через запятую.
background-attachment: fixed;
Значения
fixed
Делает фоновое изображение элемента неподвижным.
scroll
Позволяет перемещаться фону вместе с содержимым.
inherit
Наследует значение родителя.
local
Фон фиксируется с учётом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон выходящий за рамки элемента остаётся на месте.
Синтаксис
CSS2.1
background-attachment: fixed | scroll | inherit
CSS3
background-attachment: fixed | scroll | local[, fixed | scroll | local]*
background-color
(цвет фона)
Определяет цвет фона элемента. Хотя это свойство не наследует свойства своего родителя, из-за того, что начальное значение устанавливается прозрачным, цвет фона дочерних элементов совпадает с цветом фона родительского элемента.
background-color: #3366CC;
Значения
См. цвет
transparent
Устанавливает прозрачный фон.
inherit
Наследует значение родителя.
Синтаксис
background-color: <цвет> | transparent | inherit</цвет>
background-image
(фон изображение)
Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью. То же произойдет, если изображения не доступны или их показ в браузере отключен. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет. В CSS3 допустимо указывать несколько фоновых изображений, перечисляя их параметры через запятую.
background-image: url(images/bg.jpg);
Значения
url
В качестве значения используется путь к графическому файлу, который указывается внутри конструкции url(). Путь к файлу при этом можно писать как в кавычках (двойных или одинарных), так и без них.
none
Отменяет фоновое изображение для элемента.
inherit
Наследует значение родителя.
Синтаксис
CSS2.1
background-image: url(путь к файлу) | none | inherit
CSS3
background-image: url(путь к файлу) | none[, url(путь к файлу) | none]*
background-position
(позиция фона)
Задает начальное положение фонового изображения, установленного с помощью свойства background-image. В CSS3 допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.
background-position: right bottom;
Значения
У свойства background-position два значения, положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom). Кроме использования ключевых слов положение также можно задавать в процентах, пикселах или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее.
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% (в правом нижнем углу)
В скобках указано, где располагается фоновый рисунок относительно контейнера.
При inherit значение наследуется у родителя элемента.
Синтаксис
CSS2.1
background-position: [left | center | right | <проценты> | <значение>] ||
[top | center | bottom | <проценты> | <значение>] | inherit
CSS3
background-position: <позиция>[, <позиция>]*</позиция></позиция></значение></проценты></значение></проценты>
background-repeat
(повторение фона)
Определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-image. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны. В CSS3 допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.
background-repeat: repeat-x;
Значения
no-repeat
Устанавливает одно фоновое изображение в элементе без его повторений, положение которого определяется свойством background-position (по умолчанию в левом верхнем углу). Аналогично no-repeat no-repeat.
repeat
Фоновое изображение повторяется по горизонтали и вертикали. Аналогично repeat repeat.
repeat-x
Фоновый рисунок повторяется только по горизонтали. Аналогично repeat no-repeat.
repeat-y
Фоновый рисунок повторяется только по вертикали. Аналогично no-repeat repeat.
inherit
Наследует значение родителя.
space
Изображение повторяется столько раз, чтобы полностью заполнить область; если это не удаётся, между картинками добавляется пустое пространство.
round
Изображение повторяется так, чтобы в области поместилось целое число рисунков; если это не удаётся сделать, то фоновые рисунки масштабируются.
Синтаксис
CSS2.1
background-repeat: no-repeat | repeat | repeat-x | repeat-y | inherit
CSS3
background-repeat: <повторение> [ , <повторение> ]*</повторение></повторение>
background-size
(размер фона)
Масштабирует фоновое изображение согласно заданным размерам.
background-size: cover;
Значения
<значение>
Задает размер в любых доступных для CSS единицах — пикселы (px), сантиметры (cm), em и др.
<проценты>
Задает размер фоновой картинки в процентах от ширины или высоты элемента.
auto
Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.
cover
Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
contain
Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.
Если установлено одно значение, оно задает ширину фона, второе значение принимается за auto. Пропорции картинки при этом сохраняются. Использование двух значений через пробел задает ширину и высоту фоновой картинки.
Синтаксис
background-size: [ <значение> | <проценты> | auto ]{1,2} | cover | contain
</проценты></значение></проценты></значение>
background
(фон)
Универсальное свойство background позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно. В CSS3 допустимо указывать параметры сразу нескольких фонов, перечисляя их через запятую.
background: url(images/hand.png) repeat-y #fc0;
Значения
Любые комбинации пяти значений, разделяемых между собой пробелом, определяющих стиль фона, в произвольном порядке. Ни одно значение не является обязательным, поэтому неиспользуемые можно опустить. inherit наследует значение у родительского элемента.
Синтаксис
CSS2.1
background: [background-attachment || background-color || background-image
|| background-position || background-repeat] | inherit
CSS3
background: [<фон>, ]* <последний_фон></последний_фон></фон>
