Атрибуты: Параметры фона.

  Атрибуты стилей фона применяются для оформления фона поля элементов тегов.
  Фон это подложка под внутренним контентом элемента.

  Окраска фона.
  Атрибуты:
  background-color - Устанавливает окраску фона в поле определяемого элемента тега.

Формат:

  • background-color:
      Цвет
      |transparent
      |initial
      |inherit
      |unset

Значения:

  • Цвет - CSS значение цвета.
  • transparent - Прозрачный фон.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Рисунки фона.
  Атрибуты:
  background-image - Устанавливает рисунки в качестве фона в поле определяемого элемента тега.

Формат:

  • background-image:
      Изображение1|Градиент1
      [, Изображение2]|Градиент2
      [,... [, ИзображениеN|ГрадиентN]...]
      |none

Значения:

  • Изображение - CSS значение изображения, которое создает рисунок фона.
      Может быть назначено несколько изображений для фоновых рисунков, которые создадут слои фона.
  • Градиент - CSS значение градиента, которое создает рисунок фона.
      Может быть назначено несколько градиентов для фоновых рисунков.
  • none - Определяет отсутствие фона-рисунка.
      Это нормальное состояние, оно действует по умолчанию и равносильно отсутствию атрибута background-image.
      Например так можно переопределить элементы тегов из группы определенной основным селектором в любом специальном селекторе.
  Если для фона назначено несколько рисунков, то каждый из них последовательно создаёт свой слой фона, которые накладываются друг на друга.
  Последним слоем фона ("нижним") всегда является окраска фона.
  Последовательность слоёв фоновых рисунков соответствует перечислению изображений и(или) градиентов в значении атрибута background-image.
  Самым первым слоем ("верхним") является слой, созданный первым изображением или градиентом, в этой последовательности.

  Стиль наложения слоёв созданных фоновыми рисунками устанавливается атрибутом стиля background-blend-mode.
  background-attachment - Устанавливает опции скроллинга фонового рисунка с заданным изображением в поле определяемого элемента тега вместе с контентом этого поля.
  Имеет смысл только при наличии изображений установленных атрибутом стиля background-image.

Формат:

  • background-attachment:
      scroll|fixed|local
      [, scroll|fixed|local]
      [,... [, scroll|fixed|local]...]

Значения:

  Последовательность значений атрибута стиля background-attachment соответствует последовательности слоёв установленных атрибутом стиля background-image.
  background-position - Устанавливает позицию заданного изображения в фоновом рисунке поля определяемого элемента тега.
  Имеет смысл только при наличии изображений заданных атрибутом стиля background-image и связанного атрибута стиля background-repeat: no-repeat.
  Относительность позиционирования соответствующего изображения в фоновом рисунке устанавливается атрибутом стиля background-origin.

Формат:

  • background-position:
      Позиция1
      [, Позиция2]
      [,... [, ПозицияN]...]

Значения:

  Последовательность значений атрибута стиля background-position соответствует последовательности слоёв установленных атрибутом стиля background-image.
  background-repeat - Устанавливает способ формирования фоновых рисунков, заданных изображениями в поле определяемого элемента тега
  Имеет смысл только при наличии изображений установленных атрибутом background-image.
  Формирование фонового рисунка изображением учитывает значение атрибута стиля background-size.

Формат:

  • background-repeat:
      no-repeat|repeat|repeat-x|repeat-y|space|round|Горизонталь Вертикаль
      [, no-repeat|repeat|repeat-x|repeat-y|space|round]|Горизонталь Вертикаль
      [,... [, no-repeat|repeat|repeat-x|repeat-y|space|round|Горизонталь Вертикаль]...]

Значения:

  • no-repeat – Соответствующее изображение из списка значений background-image не будет повторяться в фоновом рисунке своего слоя.
      Если изображение маленькое, то часть фона элемента останется не заполненной этим слоем.
  • repeat - Соответствующее изображение из списка значений background-image будет повторяться в рисунке своего слоя по горизонтали и вертикали (умолчание).
  • repeat-x – Соответствующее изображение будет повторяться в фоновом рисунке своего слоя только по горизонтали.
  • repeat-y – Соответствующее изображение будет повторяться в фоновом рисунке своего слоя только по вертикали.
  • space – Соответствующее изображение будет повторяться в фоновом рисунке своего слоя по горизонтали и по вертикали.
      Весь рисунок заполнится максимально возможным количеством изображений, а первое и последнее (по горизонтали и вертикали) могут быть поровну обрезаны.
      Значение space может привести к образованию прозрачных границ между повторами изображения.
  • round – Соответствующий изображение будет повторяться в фоновом рисунке своего слоя по горизонтали и по вертикали.
      Весь рисунок заполнится максимально возможным количеством изображений, а первое и последнее (по горизонтали и вертикали) могут быть поровну масштабированы для того, чтобы не обрезаться.
  • Горизонталь – Одно из ключевых слов no-repeat, repeat, space или round для формирования фонового рисунка слоя соответствующим изображением по горизонтали.
  • Вертикаль – Одно из ключевых слов no-repeat, repeat, space или round для формирования фонового рисунка слоя соответствующим изображением по вертикали.
  Последовательность значений атрибута стиля background-repeat соответствует последовательности слоёв установленных атрибутом стиля background-image.
  background-size - Устанавливает способ масштабирования заданного изображения в фоновом рисунке поля определяемого элемента тега.
  Имеет смысл только при наличии изображений заданных атрибутом стиля background-image.
  Относительность масштабирования изображения в фоновом рисунке устанавливается атрибутом стиля background-origin.

Формат:

  • background-size:
      Размер11 [Размер12] |auto|cover|contain
      [, Размер22 [Размер22] |auto|cover|contain]
      [,... [, РазмерN1 [РазмерN2] |auto|cover|contain]...]

Значения:

  • Размерi1 – Горизонтальный размер для соответствующего изображения из списка значений background-image.
      Задаётся линейной величиной с единицей измерения.
      Если задан один размерi1, то изображение пропорционально масштабируется.
  • Размерi2 – Вертикальный размер для соответствующего изображения из списка значений background-image.
      Задаётся линейной величиной с единицей измерения.
      Два размера - размерi1 или размерi2 могут поменять пропорции изображения.
  • auto - Изображение помещается в соответствующем фоновом рисунке как есть.(Умолчание).
  • cover - Минимальный размер (по горизонтали или вертикали) изображения в соответствующем фоновом рисунке должен подгоняться под соответствующий размер поля определяемого элемента тега.
      Пропорции изображения не изменяются, поэтому оно может быть соответственно обрезано.
  • contain - Максимальный размер (по горизонтали или вертикали) изображения в соответствующем фоновом рисунке должен подгоняться под соответствующий размер поля определяемого элемента тега.
      Пропорции изображения не изменяются.
  Последовательность значений атрибута стиля background-size соответствует последовательности слоёв установленных атрибутом стиля background-image.
  background-origin - Устанавливает относительность формирования фонового рисунка, масштабирования и позиционирования изображения фонового рисунка.
  Имеет смысл только при наличии рисунков заданных атрибутом стиля background-image и связанного атрибута стиля background-attachment: scroll|local.

Формат:

  • background-origin:
      padding-box|border-box|content-box
      [, padding-box|border-box|content-box]
      [,... [, padding-box|border-box|content-box]...]

Значения:

  Последовательность значений атрибута стиля background-origin соответствует последовательности слоёв установленных атрибутом стиля background-image.
  Атрибут background-origin только устанавливает относительность формирования фонового рисунка, масштабирования и позиционирования изображения фонового рисунка.
  Область видимости фонового рисунка задаётся атрибутом стиля background-clip.
  Соответственно, если область, заданная атрибутом background-origin, меньще чем область, заданная атрибутом background-clip для одного и того же слоя фона, то рисунок фона всё равно будет виден во всей области, заданной атрибутом background-clip.
  Область видимости слоёв фона.
  Атрибуты:
  background-clip - Устанавливает область видимости слоёв фона заданных атрибутом стиля background-image и атрибутом стиля background-color.
Формат:

  • background-clip:
      padding-box|border-box|content-box
      [, padding-box|border-box|content-box]
      [,... [, padding-box|border-box|content-box]...]

Значения:

  • padding-box – Область видимости слоя фона (и область размещения последнего слоя в крайнем случае) располагается во всем поле элемента, за исключением рамок (умолчание).
  • border-box - Область видимости слоя фона (и область размещения последнего слоя в крайнем случае) располагается во всем поле элемента, в том числе, и под рамками.
      Не распространяется на рисованные рамки.
  • content-box - Область видимости слоя фона (и область размещения последнего слоя в крайнем случае) располагается только под пользовательским представлением контента определяемого элемента тега.
  Последовательность значений атрибута стиля background-clip соответствует последовательности слоёв установленных атрибутом стиля background-image.
  Самым "нижним" слоем фона является слой заданный атрибутом стиля background-color.
  Самым "верхним" - слой заданный первым из списка значений атрибута стиля background-image.
  Если нет слоёв фона с рисунком, то значение атрибута стиля background-clip задаст область видимости фона заданного атрибутом стиля background-color.
  Если есть слои фона с рисунком, то количество значений атрибута background-clip не должно быть больше количества значений атрибута background-image.
  Поэтому, к примеру, в фоне из двух слоёв с рисунком, первое значение из списка значений атрибута background-clip задаст область видимости для первого слоя фона. А второе значение задаст область видимости второго слоя и, одновременно, область видимости слоя фона заданного атрибутом background-color. Три значения для background-clip в этом случае избыточны (по непонятной причине).

  Фон, заданный атрибутом стиля background-image отобразится в его области видимости в соответствии со значением, установленным для него атрибутом стиля background-origin.
  Если область, заданная атрибутом background-origin, меньще чем область, заданная атрибутом background-clip для одного и того же слоя фона, то рисунок фона всё равно будет виден во всей области, заданной атрибутом background-clip.
  Общий стиль фона.
  Атрибуты:
  background - Устанавливает общий стиль фона.

Формат:

  • background:
      [Окраска [Изображение|Градиент [Формирование] [Позиция] [Масштаб] [Размещение] [Скроллинг]]

Значения:

  • Окраска – Окраска фона. Определяется значением атрибута background-color.
  • Изображение|Градиент – Изображение или градиент для рисунка фона. Определяется значением атрибута background-image.
  • Формирование – Способ формирования изображением рисунка фона. Определяется значением атрибута background-repeat.
  • Позиция – Позиция изображения в рисунке фона. Определяется значением атрибута background-position.
  • Масштаб – Масштаб изображения в рисунке фона. Определяется значением атрибута background-size.
  • Размещение – Размещение фона. Определяется значением атрибута background-clip.
  • Скроллинг – Возможность скроллинга изображения в рисунке фона. Определяется значением атрибута background-attachment.
  Наложение слоёв фона.
  Атрибуты:
  background-blend-mode - Устанавливает способ наложения слоёв фоновых рисунков в поле определяемого элемента тега.
  Имеет смысл только при наличии изображений или градиентов установленных атрибутом стиля background-image.
  Наложение каждого последующего слоя учитывает эффект от наложения всех предыдущих слоёв под ним.

Формат:

  • background-blend-mode:
      Способ1
      [, Способ2]
      [,... [, СпособN]...]

Значения:

  Последовательность значений атрибута стиля background-blend-mode соответствует последовательности слоёв установленных атрибутом стиля background-image.

Пример:

<STYLE>
  #backgroundX { height: 400px; width: 400px; position: relative;
    border: 20px double blue; font-size: 40px; color: red; margin: 1em; padding: 2em;
    background-color: cornflowerblue;
    background-image: url("../content/pauk2.jpg"), url("../content/ROGA.gif");
    background-size: auto, 300px;
    ackground-repeat: repeat, no-repeat;
    background-origin: content-box, border-box;
    background-clip: border-box, border-box;}
  #backgroundX:hover {background-clip: content-box, border-box;
    background-origin: content-box, padding-box;
    background-blend-mode: overlay, multiply;}
</STYLE>
............
<DIV id="backgroundX">Рыба</DIV>

      Наведите мышку на поле элемента:
Рыба


Ещё пример:

<STYLE>
  #backgroundY { height: 400px; width: 400px; position: relative; border: 20px double blue;
    font-size: 40px; color: red; margin: 1em; padding: 2em;
    background-color: cornflowerblue;
    background-image:
      url("../content/ROGA.gif"),
      url("../content/ROGA.gif"),
      url("../content/ROGA.gif"),
      url("../content/ROGA.gif")
;
    background-repeat:
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat
;
    background-position:
      0% 0%,
      100% 100%,
      100% 0%,
      0% 100%
;
    background-clip:
      border-box,
      padding-box,
      content-box,
      content-box
;
    background-origin:
      padding-box,
      border-box,
      content-box,
      border-box
;}
</STYLE>
............

<DIV id="backgroundY">Рыба</DIV>
рыба