Pozadina-ponoviti - CSS-trikovi

Anonim

Ako background-imageje navedeno svojstvo, background-repeatsvojstvo u CSS-u definira hoće li se (i kako) ponoviti. Evo primjera:

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

Ovo su moguće vrijednosti za ovo svojstvo (osim uobičajenih stvari poput inherit):

  • repeat: pločica slike u oba smjera. To je zadana vrijednost.
  • repeat-x: vodoravno pločica slike
  • repeat-y: okomito postavlja pločicu na sliku
  • no-repeat: nemoj pločica, samo jednom prikaži sliku
  • space: pločica slike u oba smjera. Nikad ne obrezujte sliku osim ako jedna slika nije prevelika da stane. Ako može stati više slika, razmaknite ih prigodnim slikama uvijek dodirujući rubove.
  • round: pločica slike u oba smjera. Nikad ne obrezujte sliku osim ako jedna slika nije prevelika da stane. Ako više slika može stati s preostalim prostorom, zgnječite ih ili istegnite kako biste popunili prostor. Ako je preostala manja od pola jedne širine slike, rastegnite se, ako je veća, istegnite se.

Postoje i dvije sintakse vrijednosti:

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

Što sintakse s jednom vrijednošću čini samo skraćenicama za sintaksu s dvije vrijednosti. Na primjer, roundstvarno je round round.

Također možete razdvojiti zarezom više vrijednosti ako imate posla s više pozadina.

Demo

Pogledajte
pozadinu olovke -ponavljanje od strane CSS-trikova (@ css-trikovi)
na CodePenu.

Interaktivni demonstracijski prikaz rada spacei roundrada u usporedbi sa repeat:

Pogledajte Pen
The Different `background-repeat`s Chrisa Coyiera (@chriscoyier)
na CodePen-u.

Još jedan demo s promjenom veličine, koji prikazuje "lažnu" granicu:

Pogledajte
sliku olovke na jednostavan način putem ShopTalk Show-a (@shoptalkshow)
na CodePenu.

Evo još jedne zabavne demonstracije s demonstracijom hamburgera background-repeat: round;.

Povezano

  • pozadina-prilog
  • pozadina-isječak
  • boja pozadine
  • pozadinska slika
  • podrijetlo podrijetla
  • pozadinski položaj
  • veličina pozadine

Resursi

  • CSS3 Spec
  • MDN

Podrška preglednika

Krom Safari Firefox Opera IE Android iOS
1+ 1+ 1+ 3,5+ 4+ 1+ 1+

Sintaza više vrijednosti odvojena zarezima podržana samo u Firefoxu 3.6+ i IE 9+. Sintaksa s dvije vrijednosti za kontrolu vodoravnih i okomitih vrijednosti odvojena je podržana samo u Firefoxu 13+ i IE 9+. roundI spaceključne riječi su samo za Firefox 49+ i IE 9+.