Выберите перечень содержащий только существующие css свойства фона

Универсальное свойство background

Свойство background является объединенным свойством для определения большинства характеристик CSS фона. В короткой форме оно может принимать несколько значений, которые разделяются через запятую, каждое значение соответствует слою фона:

Каждый фоновый слой определяет свои значения свойств:

Для каждого слоя объединенное свойство задает сначала свойства background-image , background-position , background-size , background-repeat , background-origin , background-clip и background-attachment , а затем присваиваются все остальные значения.

Другими словами, объединенное свойство background присваивает заданные значения явно, а также задает изначальные наборы значений для характеристик, значения которых пропущены.

Это означает, что если вы используете сокращенное свойство background и указываете только некоторые из свойств фона, то другим параметрам будут присвоены их изначальные значения объединенного свойства.

В следующем примере мы используем сокращенное свойство background , но указываем только значение для background-attachment :

Приведенное выше выражение равносильно следующему:

Когда для элемента в одном объединенном свойстве объявляется несколько фоновых слоев, то в конце устанавливается значение background-color как часть последнего CSS фонового изображения :

Свойство background-color может определяться только в последнем фоновом слое, потому что существует только один цвет фона для всего элемента.

Для может задаваться одно из трех возможных значений: padding-box , content-box и border-box .

И, background-clip и background-origin могут принимать значение . Но как быть, если в сокращённом свойстве указано только одно значение ? Тогда оно устанавливается для обоих параметров. Если указаны два значения, то первое устанавливается для background-origin, а второе — для background-clip .

Официальный синтаксис

background: [ , ]* /* где */ = || [ / ]? || || || /* и */ = || [ / ]? || || || ||

Изначальные значения: Ниже приводится перечень начальных значений для конкретных свойств фона в CSS :

• background-image: none ;
• background-position: 0% 0%;
• background-size: auto auto ;
• background-repeat: repeat ;
• background-origin: padding-box ;
• background-clip: border-box ;
• background-attachment: scroll ;
• background-color: transparent .

Применяется: ко всем элементам

Возможность анимации: только свойства background-color, background-position и background-size могут быть анимированы

Примечания

Значения отдельных свойств фона в объединенном свойстве background могут перемещаться. Единственное жесткое требование — свойство CSS background size должно определяться после свойства background-position , и они должны быть разделены символом » / «. Вы не можете указать в объединенном свойстве размер фона, если не задаете позицию фона, в противном случае объявление является недействительным.

Примеры

В приведенном ниже коде с помощью объединенного свойства устанавливается фоновое изображение для элемента:

Источник

CSS-свойство background

Свойство background CSS позволяет управлять фоном любого элемента (тем, что отрисовывается под содержимым этого элемента). Это сокращенное свойство и оно позволяет записать несколько параметров в одной инструкции. Например:

Всего у фона есть восемь свойств, и все они начинаются со слова background:

• background-color;
• background-image;
• background-repeat;
• background-attachment;
• background-position;
• background-size;
• background-clip;
• background-origin.

Их можно использовать по отдельности или комбинировать, как показано в первом абзаце. Если конкретное свойство не задано оно будет установлено в значение по умолчанию.

background-color

Свойство устанавливает цвет фона элемента, к которому оно относится. Его можно задать несколькими способами:

• словом (названием цвета по-английски),
• шестнадцатеричным числом, предваряя его решеткой;
• с помощью RGB-кода.

На примере задали фон у квадрата с помощью инструкции background-color: blue .

По умолчанию фон в HTML у страницы или любого элемента является полностью прозрачным, то есть ему присвоено значение transparent (отсутствие какого-либо цвета).

background-image

С помощью этого свойства в качестве фона для сайта можно поставить изображение. Указывая значения других свойств, можно изменять его размер, определять место на странице и повторять как в горизонтальном, так и в вертикальном направлении. Указателем на рисунок в таблице является путь к файлу-изображению, который записывается с помощью конструкции url. Следует помнить, что тег img, в отличие от свойства image, является частью языка html.

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

background-repeat

Является дополнением к предыдущему свойству и уточняет, как повторяется внутри блока изображение, использованное в качестве фона. По умолчание установлено repeat – повтор и по горизонтали и по вертикали.

На примере использовано значение свойства repeat-x , при котором фоновая картинка повторяется только по горизонтали.

background-attachment

Свойство устанавливает, будет ли фоновый рисунок привязан к содержимому элемента, то есть будет ли оно прокручиваться вместе с ним (при наличии полосы прокрутки). Присвоение свойству значения scroll приведет к прокручиванию, в случае установки его в состояние fixed оно будет неподвижно. Значение по умолчанию – scroll .

На примере использовано свойство background-attachment: fixed . При скроллинге содержимого элемента фон остается неподвижным.

background-position

Дает возможность установить точное местоположение фонового изображения и использует два значения, указывающих координаты по горизонтали и вертикали и записываемых через пробел. Свойство background-position позволяет применять различные способы – названия сторон элемента ( left , right , top , bottom , center ), проценты, миллиметры, пиксели.

Значение по умолчанию – 0, то есть левый верхний угол изображения помещается в левый верхний угол элемента.

На примере изображение сдвинуто вправо на 20px и вниз на 40px;

background-size

С помощью свойства можно осуществить изменение величины фоновой картинки, то есть использовать ее масштабирование. Размер можно изменять используя любые единицы, которые допустимы в таблицах CSS – проценты, пиксели, em (величина применяемого в блоке шрифта).

При этом значение cover пропорционально увеличивает рисунок до ближайших размеров – ширины или высоты, contain – позволяет полностью заполнить блок, также сохраняя соотношение ширины и высоты.

Значение по умолчанию – auto .

На примере мы взяли квадрат размером 200×200 и фоновую картинку меньшим размером – 100×100, которой заполнили заполнили всю область фона с помощью background-size: cover .

background-clip

Дает возможность определить взаимодействие границ фона и отступов элемента. Предусмотрены три варианта – под границами ( border-box – по умолчанию), с учетом отступов ( padding-box ), внутри контента ( content-box ).

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

background-origin

Действует аналогично предыдущему свойству, но применяется в отношении фонового рисунка. То есть определяет точку начала отсчета координат левого верхнего угла вставленного изображения – это наружный или внутренний угол границы или левый верхний угол содержимого. Имеет такие же значения – border-box , padding-box , content-box . Значение по умолчанию – padding-box .

Множественные фоны

Таблицы CSS позволяют сделать фон, состоящим из нескольких слоев изображений, количество которых определяется числом значений, вводимых последовательно через запятую после background-image. При этом картинки ложатся друг под друга сверху вниз, начиная с первого. Каждую из них можно определить с помощью указания значений других свойств, имеющих отношение к изображению. Присваивая слою состояние прозрачности, его можно скрывать.

Таким образом, установка значений свойств фона в CSS дает возможность окрасить его в любой цвет, приняв в учет различные элементы блока (свойства color и clip ). Вместо этого или дополнительно внутри элемента можно поместить фоновое изображение, выбрав для него определенное место, увеличив или уменьшив при этом, а также при необходимости повторив его в горизонтальном или/и вертикальном направлении (свойства image , size , position , attachment , repeat , origin ).

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

Источник

background

Свойство background объединяет в себе все свойства, которые используются для определения фона страницы.

Свойства, которые можно задать (по порядку): background-color, background-image, background-repeat, background-attachment, и background-position.

Любое из свойств может отсутствовать, если это необходимо. Кроме этого, порядок свойств может быть изменен. Браузер сам определит, какое из них соответствует нужному атрибуту.

Значение по умолчанию:	зависит от используемых аргументов
Наследуется:	нет
Версия:	CSS1

Аргументы

Значение	Описание
background-color	Определяет цвет используемого фона.
background-image	Определяет используемое изображение фона.
background-repeat	Определяет как повторять фоновое изображение.
background-attachment	Определяет является ли фоновое изображение фиксированным или прокручивается вместе со страницей.
background-position	Определяет позицию фонового изображения.
inherit	Определяет должны ли параметры фона унаследоваться от элемента родителя.

Источник