Работа с фоновым изображением

Поддержка нескольких фоновых изображений

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

See the Pen multi background by Alex (@Asmodey) on CodePen.

Используйте полную запись background-image

Позиционирование фона

В CSS3 есть несколько способов позиционирования фонового изображения относительно элемента:

  • backgound-origin: padding-box — фон позиционируется относительно края элемента с учетом толщины границы
  • backgound-origin: border-box — фон позиционируется относительно границы, но граница перекрывает изображение
  • backgound-origin: content-box — фон позиционируется относительно содержимого элемента

See the Pen background-origin by Alex (@Asmodey) on CodePen.

Background-clip

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

  • background-clip: padding-box — фон отображается внутри границ
  • background-clip: padding-box — фон выводится под границами
  • background-clip: padding-box — фон выводится внутри контента

See the Pen background-clip by Alex (@Asmodey) on CodePen.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *