Нові варіанти повторення фонового зображення в CSS3

Крейг Баклер

Оригінал

У CSS 2.1 властивість background-repeat має чотири значення: no-repeat, repeat, repeat-x і repeat-y. Хоча вони корисні, вони не дають повного контролю над процесом повторення, і картинки можуть бути обрізані, якщо вони не поміщаються в контейнер точно певну кількість разів.

CSS3 вводить два нові варіанти: space і round.

background-repeat: space

Варіант space буде повторювати зображення по горизонталі і вертикалі без обрізання або зміни розміру:

background-repeat: space;

background-repeat: round

Варіант round буде повторювати зображення по горизонталі і вертикалі без обрізання, але зображення може бути змінене:

background-repeat: round;

Предположимо, що у нас є фонове зображення шириною 100px. Воно розміщене в елементі шириною 520px по горизонталі, тоді:

round(520 / 100) = round(5.2) = 5

Браузер покаже п'ять зображень, але задасть ширину зображення як 104px (520px/5). Зображення буде зроблене ширшим, щоб вписатися в контейнер.

Різні повторення за шириною і висотою

background-repeat може містити два значення для зміни горизонтального і вертикального повторення:

background-repeat: round space; /* ширина змінюється, висота ні */
background-repeat: space round; /* ширина залишається, висота змінюється */
background-repeat: space no-repeat; /* повторювати лише по горизонталі */

Зміна позиції фону

Повторення через space або round працюватиме, як ви очікуєте, лише коли background-position задано як 0 0. Ви можете вільно змінювати його, розміри зображень і відстань між ними залишаться тими ж, але зліва зверху кут зміниться відповідно.

Робота в браузерах

Два браузери підтримують властивості з round і space. Вгадайте, які? Помиляєтеся: це IE9 і Opera. На момент написання статті, ці значення не реалізовані в Firefox, Chrome або Safari. Але все погано.

  • Коли Firefox стикається з round або space, він замінює значення на repeat.
  • Коли Chrome або Safari стикаються з round або space, вони замінюють їх на no-repeat. Крім того, браузери на Webkit, здається, розуміють властивості, але не відображають їх правильно.

Чудово. Дякую, хлопці.

Єдиний спосіб досягти якоїсь єдності - це змусити Firefox відображати як Webkit.

#element {
  background-repeat: no-repeat;
  background-repeat: space;
}

Отже.

  • IE9 і Опера правильно повторюватимуть зображення по горизонталі і вертикалі без обрізання або масштабування зображення.
  • Firefox не розуміє space, підставляє замість нього значення no-repeat і показує лише одне зображення.
  • Chrome і Safari розуміють space, але помилково показують лише одне зображення без повторення.

Неприємно. Буде краще зачекати кілька місяців, поки Mozilla і Webkit включать повну підтримку background-repeat.

CSS3фон
SEO текст: Вивчайте нові властивості CSS3 для кращого управління повторенням фонових зображень на вашому веб-сайті. Дізнайтеся про використання значень "space" і "round" для створення ефективного дизайну. Будьте уважні до підтримки браузерами, щоб забезпечити правильне відображення стилів.

Часті запитання