Бацкгроунд-репеат - ЦСС-трикови

Anonim

Ако је background-imageсвојство наведено, background-repeatсвојство у ЦСС-у дефинише да ли ће се (и како) поновити. Ево примера:

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.

Такође можете раздвојити зарезом више вредности ако имате посла са више позадина.

Демо

Погледајте
позадину оловке -поновите ЦСС-трикови (@ цсс-трикови)
на ЦодеПен-у.

Интерактивни демо о томе како spaceи како roundрадити, у поређењу са repeat:

Погледајте Пен
Тхе Дифферент `бацкгроунд-репеат`с Цхрис Цоииер-а (@цхрисцоииер)
на ЦодеПен-у.

Још једна демонстрација промене величине која приказује „лажну“ границу:

Погледајте
слику оловке постављену на оловку на једноставан начин од СхопТалк Схов-а (@схопталксхов)
на ЦодеПен-у.

Ево још једне забавне демонстрације са демонстрацијом хамбургера background-repeat: round;.

Повезан

  • позадина-прилог
  • позадина-исечак
  • боја позадине
  • позадинска слика
  • позадина-порекло
  • позадина-положај
  • величина позадине

Ресурси

  • ЦСС3 Спец
  • МДН

Подршка прегледача

Хром Сафари Фирефок Опера ИЕ Андроид иОС
1+ 1+ 1+ 3.5+ 4+ 1+ 1+

Синтаза више вредности одвојена зарезима подржана само у Фирефоку 3.6+ и ИЕ 9+. Синтакса са две вредности за контролу хоризонталних и вертикалних вредности раздвојена је подржана само у Фирефоку 13+ и ИЕ 9+. roundИ spaceкључне речи су само Фирефок и ИЕ 49+ 9+.