Фоновий повтор - 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.

Ви також можете розділити кілька значень комами, якщо маєте справу з кількома фонами.

Демо

Дивіться
фон-повтор пера за допомогою 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 +.