Фон-повтор - CSS-хитрости

Anonim

Если background-imageсвойство указано, background-repeatсвойство в CSS определяет, будет ли оно повторяться (и как). Вот пример:

html ( background-image: url(logo.png.webp); background-repeat: repeat-x; )

Возможные значения этого свойства (помимо обычных вещей вроде inherit):

  • repeat: мозаика изображения в обоих направлениях. Это значение по умолчанию.
  • repeat-x: мозаика изображения по горизонтали
  • repeat-y: мозаика изображения вертикально
  • no-repeat: не мозаить, просто показать изображение один раз
  • space: мозаика изображения в обоих направлениях. Никогда не кадрируйте изображение, если одно изображение не помещается слишком большого размера. Если может поместиться несколько изображений, разложите их по очереди, изображения всегда касаются краев.
  • round: мозаика изображения в обоих направлениях. Никогда не кадрируйте изображение, если одно изображение не помещается слишком большого размера. Если несколько изображений могут уместиться с оставшимся пространством, сожмите их или растяните, чтобы заполнить пространство. Если осталось меньше половины ширины изображения - растяните, если больше - растяните.

Также существует синтаксис с двумя значениями:

.element ( /* background-repeat: horizontal vertical */ background-repeat: repeat space; background-repeat: repeat repeat; background-repeat: round space; )

Это делает синтаксис с одним значением просто сокращением синтаксиса с двумя значениями. Например, roundдействительно round round.

Вы также можете разделить запятыми несколько значений, если имеете дело с несколькими фонами.

Демо

См. Pen
background-repeat от CSS-Tricks (@ css-tricks)
на CodePen.

Интерактивная демонстрация того, как spaceи roundработает, по сравнению с repeat:

См. Pen
The Different `background-repeat`s Криса Койера (@chriscoyier)
на CodePen.

Еще одна демонстрация изменения размера, показывающая «фальшивую» рамку:

См.
Изображение с рамкой, закрепленной ручкой, легко от ShopTalk Show (@shoptalkshow)
на CodePen.

Вот еще одна забавная демонстрация гамбургеров background-repeat: round;.

Связанный

  • фоновое приложение
  • фоновый клип
  • фоновый цвет
  • фоновая картинка
  • фон-происхождение
  • фоновая позиция
  • размер фона

Ресурсы

  • CSS3 Spec
  • MDN

Поддержка браузера

Хром Сафари Fire Fox Опера IE Android iOS
1+ 1+ 1+ 3.5+ 4+ 1+ 1+

Синтаксис нескольких значений, разделенных запятыми, поддерживается только в Firefox 3.6+ и IE 9+. Двухзначный синтаксис для управления разделенными значениями по горизонтали и вертикали поддерживается только в Firefox 13+ и IE 9+. roundИ spaceключевые слова только Firefox 49+ и IE 9+.