First Code

Курсы программирования

Свойства CSS background

Универсальное свойство background позволяет установить одновременно все свойства стили фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. В CSS3 допустимо указывать параметры сразу нескольких фонов, перечисляя их через запятую.

Свойство background включает в себя:

background: background-image) (background-position) ( / background-size)( background-repeat) (background-attachment) (background-origin) (background-clip) (background-color);

 

Рассмотрим все свойства по отдельности, которые входят в background

1

background-color — определяет цвет фона элемента.

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

Пример использования: background-color: #fff;

2

background-image — устанавливает фоновое изображение для элемента.

Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью. То же произойдет, если изображения не доступны или их показ в браузере отключен. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет. Допустимо указывать несколько фоновых изображений, перечисляя их параметры через запятую.

Значения:

url()

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

none

отменяет фоновое изображение для элемента.

 

Пример использования: background-image: url(img/name-image.jpg);

3

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;

4

background-position-x — отдельное свойство background-position, которое задаёт положение фоновой картинки по горизонтали

Выполняет все те же функции, что и background-position, только в отличии от него принимает одно значение, которое задаёт положение фонового изображения внутри элемента только относительно ширины (по горизонтали).

Пример использования:
background-position-x: 100%;
background-position: right;

5

background-position-y — отдельное свойство background-position, которое задаёт положение фоновой картинки по вертикали

Выполняет все те же функции, что и background-position, только в отличии от него принимает одно значение, которое задаёт положение фонового изображения внутри элемента только относительно высоты (по вертикали).

Пример использования:
background-position-y: 50px;
background-position: top;

6

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;

7

background-size — задает размер фоновому изображению

Значения:

размер

указывается размер в любых доступных для CSS единицах — пикселях (px), сантиметрах (cm), em и др.

%

задаёт размер фоновой картинки в процентах от ширины или высоты элемента

auto

если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки

cover

масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока

contain

масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока

 

Если установлено одно значение, оно устанавливает ширину фона, второе значение принимается за auto. Пропорции картинки при этом сохраняются. Использование двух значений через пробел задаёт ширину и высоту фоновой картинки.

Примеры использования:
background-size: 50px 100px;
background-size: cover;

8

background-attachment — устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым

Свойство background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом. Можно указать несколько значений для ряда фоновых изображений, перечисляя значения через запятую.

Значения:

scroll

позволяет перемещаться фону вместе с содержимым

fixed

делает фоновое изображение элемента неподвижным

local

фон фиксируется с учётом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон, выходящий за рамки элемента, остаётся на месте

 

Пример использования: background-attachment: fixed;

9

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;

10

background-origin

Свойство background-origin определяет область позиционирования фонового рисунка. Это свойство не применяется, когда значение background-attachment задано как fixed.

Значения:

border-box

фон позиционируется относительно границы, при этом линия границы может перекрывать изображение

padding-box

фон позиционируется относительно края элемента с учетом толщины границы

content-box

фон позиционируется относительно содержимого элемента

 

Пример использования:
background-clip: border-box;

11

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;