Свойства CSS background
background
Универсальное свойство background позволяет установить одновременно все свойства стили фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. В CSS3 допустимо указывать параметры сразу нескольких фонов, перечисляя их через запятую.
/* Свойство background включает в себя: */
background: (background-color) (background-image) (background-position) ( / background-size)( background-repeat) (background-attachment) (background-origin) (background-clip);
Рассмотрим все свойства по отдельности, которые входят в background
background-color
Определяет цвет фона элемента. Свойство не наследует свойства своего родителя, из-за того, что начальное значение устанавливается прозрачным, цвет фона дочерних элементов совпадает с цветом фона родительского элемента.
/* Пример использования: */
background-color: #fff;
background-image
Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью. То же произойдет, если изображения не доступны или их показ в браузере отключен. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет. Допустимо указывать несколько фоновых изображений, перечисляя их параметры через запятую.
url()
в качестве значения используется путь к графическому файлу, который указывается внутри конструкции url(). Путь к файлу при этом можно писать как в кавычках (двойных или одинарных), так и без них.
none
отменяет фоновое изображение для элемента.
/* Пример использования: */
background-image: url(img/name-image.jpg);
background-position
Задаёт начальное положение фонового изображения. С помощью данного свойства появляется возможность изменять положение фонового изображения одновременно по горизонтали и вертикали. Первое значение задает позиционирование изображения по горизонтали, а второе значение по вертикали. Если указать только одно значение, то оно будет едино как по горизонтали так и по вертикали.
Значения могут задаваться в виде ключевых слов: по горизонтали (left, center, right), по вертикали (top, center, bottom);
По умолчанию фоновое изображение прижато к верхнему правому краю. К примеру, если мы хотим изменить изначальное положение изображения и позиционировать его по центру, относительно ширины (по горизонтали) и прижать к нижнему краю относительно высоты (по вертикали), то мы указываем следующие значения (background-position: center bottom;). Если нам необходимо более точно указать позиционирование, можно использовать пиксели, проценты и другие единицы измерения.
/* Пример использования: */
background-position: right top;
background-position: 100% 50%;
background-position: 100px 50px;
background-position: center;
background-position-x
Отдельное свойство background-position, которое задаёт положение фоновой картинки по горизонтали. Выполняет все те же функции, что и background-position, только в отличии от него принимает одно значение, которое задаёт положение фонового изображения внутри элемента только относительно ширины (по горизонтали).
<!— Пример использования: —>
background-position-x: 100%;
background-position: right;
background-position-y
Отдельное свойство background-position, которое задаёт положение фоновой картинки по вертикали. Выполняет все те же функции, что и background-position, только в отличии от него принимает одно значение, которое задаёт положение фонового изображения внутри элемента только относительно высоты (по вертикали).
/* Пример использования: */
background-position-y: 50px;
background-position: top;
background-repeat
Повтор фонового изображения. Определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-image. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны.
no-repeat
изображение не повторяется, устанавливает одно фоновое изображение в элементе без его повторений, положение которого определяется свойством background-position (по умолчанию в левом верхнем углу). Аналогично no-repeat no-repeat.
repeat
фоновое изображение повторяется по горизонтали и вертикали. Аналогично repeat repeat
repeat-x
фоновый рисунок повторяется только по горизонтали. Аналогично repeat no-repeat
repeat-y
фоновый рисунок повторяется только по вертикали. Аналогично no-repeat repeat
space
изображение повторяется столько раз, чтобы полностью заполнить область; если это не удаётся, между картинками добавляется пустое пространство
round
изображение повторяется так, чтобы в области поместилось целое число рисунков; если это не удаётся сделать, то фоновые рисунки масштабируются
/* Пример использования: */
background-repeat: no-repeat;
background-size
Задает размер фоновому изображению.
размер
указывается размер в любых доступных для CSS единицах — пикселях (px), сантиметрах (cm), em и др.
%
задаёт размер фоновой картинки в процентах от ширины или высоты элемента
auto
если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки
cover
масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока
contain
масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока
Если установлено одно значение, оно устанавливает ширину фона, второе значение принимается за auto. Пропорции картинки при этом сохраняются. Использование двух значений через пробел задаёт ширину и высоту фоновой картинки.
/* Пример использования: */
background-size: 50px 100px;
background-size: cover;
background-attachment
Свойство background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом. Можно указать несколько значений для ряда фоновых изображений, перечисляя значения через запятую.
scroll
позволяет перемещаться фону вместе с содержимым
fixed
делает фоновое изображение элемента неподвижным
local
фон фиксируется с учётом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон, выходящий за рамки элемента, остаётся на месте
/* Пример использования: */
background-attachment: fixed;
background-clip
Свойство background-attachment определяет, как цвет фона или фоновая картинка должна выводиться под границами. Эффект заметен при прозрачных или пунктирных границах.
border-box
выводится под границами
padding-box
фон отображается внутри границ
content-box
фон отображается только внутри контента
text
фон отображается только внутри текста
При использовании значения текст необходимо к свойству background-clip добавить префикс -webkit. Так как в Chrome, Safari, Opera и Android значение text работает только со свойством -webkit-background-clip.
/* Пример использования: */
background-clip: border-box;
-webkit-background-clip: text;
background-origin
Свойство background-origin определяет область позиционирования фонового рисунка. Это свойство не применяется, когда значение background-attachment задано как fixed.
border-box
фон позиционируется относительно границы, при этом линия границы может перекрывать изображение
padding-box
фон позиционируется относительно края элемента с учетом толщины границы
content-box
фон позиционируется относительно содержимого элемента
/* Пример использования: */
background-clip: border-box;
background-blend-mode
Определяет режим наложения фонового изображения на фоновый цвет или другие фоновые изображения. Допустимо указывать несколько значений через запятую, при этом они будут применяться к фоновым изображениям, перечисленных в background-image, в том же порядке.
normal
режим по умолчанию
multiply
умножение. В этом режиме значение основного цвета умножается на значение совмещённого цвета. Результирующий цвет всегда представляет собой более тёмный цвет. В результате умножения значения любого цвета на значение чёрного цвета вырабатывается чёрный цвет. В результате умножения значения любого цвета на значение белого цвета цвет остаётся неизменным
screen
осветление. В этом режиме перемножаются обратные значения основного и совмещённого цвета. В качестве результирующего цвета всегда применяется более светлый цвет. При осветлении с применением чёрного цвета, цвет остаётся неизменным. При перекрытии с применением белого цвета, цвет становится белым. Полученный эффект аналогичен наложению друг на друга изображений многочисленных фотографических слайдов с помощью проектора
overlay
перекрытие. В этом режиме цвета умножаются или осветляются в зависимости от основного цвета. Узоры или цвета перекрывают существующие пиксели, оставляя неизменными светлые и тёмные участки основного цвета. Базовый цвет не заменяется, а смешивается с совмещённым цветом, что позволяет отразить наличие светлых или тёмных участков первоначального цвета
darken
замена тёмным. В качестве результирующего выбирается основной или совмещённый цвет, в зависимости от того, какой из них темнее. Пиксели с цветом, более светлым по сравнению с совмещённым, заменяются, а пиксели с цветом, более тёмным по сравнению с совмещённым, остаются неизменными
lighten
замена светлым. В качестве результирующего цвета выбирается основной или совмещённый цвет, в зависимости от того, какой из них светлее. Пиксели с более тёмным цветом по сравнению с совмещённым цветом заменяются, а пиксели с более светлым цветом по сравнению с совмещённым цветом остаются неизменными
color-dodge
осветление основы. Основной цвет заменяется более ярким для отражения совмещённого цвета в результате уменьшения контраста между двумя цветами. Смешивание с чёрным цветом не приводит к появлению каких-либо изменений
color-burn
затемнение основы. Основной цвет заменяется более тёмным для отражения совмещённого цвета в результате увеличения контраста между двумя цветами. Смешивание с белым цветом не приводит к появлению каких-либо изменений
hard-light
направленный свет. В этом режиме цвета умножаются или осветляются в зависимости от совмещённого цвета. Полученный эффект аналогичен освещению изображения резким светом прожектора. Если совмещённый цвет (источник света) является более светлым, чем 50% серого, то изображение становится светлее, как после осветления. Этот эффект может применяться для добавления светлых участков к изображению. Если совмещённый цвет (источник света) является более тёмным, чем 50% серого, то изображение становится темнее, как после умножения. Этот эффект может применяться для добавления тёмных участков к изображению. Наложение чисто-чёрного или чисто-белого цвета приводит к получению чисто-чёрного или чисто-белого цвета
soft-light
рассеянный свет. В этом режиме цвета становятся более тёмными или более светлыми в зависимости от совмещённого цвета. Полученный эффект аналогичен освещению изображения расплывчатым светом прожектора. Если совмещённый цвет (источник света) является более светлым, чем 50% серого, то изображение становится светлее, как после осветления. Если совмещённый цвет является более тёмным, чем 50% серого, изображение становится темнее, как после затемнения. Наложение чисто-чёрного или чисто-белого цвета создаёт отчётливые, более тёмные или более светлые зоны, но чистого чёрного или белого цвета не получится
difference
разница. В этом режиме вычитается либо совмещённый цвет из основного цвета, либо основной цвет из совмещённого цвета в зависимости от того, какой цвет имеет большее значение яркости. Смешивание с белым цветом приводит к инвертированию значений основного цвета, смешивание с чёрным цветом не влечёт за собой каких-либо изменений
exclusion
исключение. В этом режиме создается эффект, аналогичный создаваемому в режиме «Разница», но характеризующийся более низким контрастом. Смешивание с белым цветом приводит к инвертированию значений основного цвета. Смешивание с чёрным цветом не приводит к появлению каких-либо изменений.
hue — тон. В этом режиме создаётся результирующий цвет с яркостью и насыщенностью основного цвета и цветовым тоном совмещённого цвета
saturation
Насыщенность. В этом режиме создаётся результирующий цвет с яркостью и цветовым тоном основного цвета и насыщенностью совмещённого цвета
color
цвет. Создаётся результирующий цвет с яркостью основного цвета и с цветовым тоном и насыщенностью совмещённого цвета. Этот режим сохраняет уровни серого в изображении и может применяться для раскрашивания монохромных изображений и добавления оттенков к цветным изображениям
luminosity
яркость. В этом режиме создаётся результирующий цвет с цветовым тоном и насыщенностью основного цвета и яркостью совмещённого цвета. Этот режим создаёт эффект инверсии цвета
/* Пример использования: */
background-blend-mode: screen;