Якщо 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
.
Ви також можете розділити кілька значень комами, якщо маєте справу з кількома фонами.
Демо
Дивіться
фон-повтор пера за допомогою CSS-Tricks (@ css-tricks)
на CodePen.
Інтерактивна демонстрація роботи space
та round
роботи порівняно з repeat
:
Дивіться Pen
The Different `background-repeat` від Chris Coyier (@chriscoyier)
на CodePen.
Ще одна демонстрація розміру, яка демонструє "підроблену" межу:
Перегляньте зображення ручки,
встановлене ручкою, легким способом від ShopTalk Show (@shoptalkshow)
на CodePen.
Ось ще одна весела демонстрація з демонстрацією гамбургерів background-repeat: round;
.
Пов’язані
- фон-вкладення
- фоновий кліп
- Колір фону
- фонове зображення
- фон-походження
- фонове положення
- розмір фону
Ресурси
- CSS3 Специфікація
- MDN
Підтримка браузера
Chrome | Сафарі | Firefox | Опера | 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 +.