Fona atkārtojums - CSS-triki

Anonim

Ja background-imagetiek norādīts background-repeatrekvizīts, CSS rekvizīts nosaka, vai (un kā) tas atkārtosies. Lūk, piemērs:

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

Šīs ir iespējamās šī īpašuma vērtības (papildus parastajām lietām, piemēram inherit):

  • repeat: noformējiet attēlu abos virzienos. Šī ir noklusējuma vērtība.
  • repeat-x: noformējiet attēlu horizontāli
  • repeat-y: ielieciet attēlu vertikāli
  • no-repeat: nelieciet, tikai vienu reizi parādiet attēlu
  • space: noformējiet attēlu abos virzienos. Nekad neapgrieziet attēlu, ja vien viens attēls nav pārāk liels, lai to varētu ievietot. Ja var ievietot vairākus attēlus, atbrīvojiet tos, attēlus vienmēr pieskaroties malām.
  • round: noformējiet attēlu abos virzienos. Nekad neapgrieziet attēlu, ja vien viens attēls nav pārāk liels, lai to varētu ievietot. Ja vairākos attēlos var ievietot atlikušo vietu, sagrieziet tos vai izstiepiet, lai aizpildītu vietu. Ja atlicis mazāk nekā puse no viena attēla platuma, izstiepiet, ja vairāk, izstiepiet.

Ir arī divu vērtību sintakse:

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

Kas padara vienas vērtības sintaksi tikai par divu vērtību sintaksi. Piemēram, roundir patiešām round round.

Varat arī komatatdalīt vairākas vērtības, ja jums ir vairāki foni.

Demonstrācija

Skatiet CodePen pildspalvas
fona atkārtojumu CSS-Tricks (@ css-tricks)
.

Interaktīva demonstrācija par to, kā spaceun kā roundstrādāt, salīdzinot ar repeat:

Skatiet
Krāsa Koijera (@chriscoyier)
atribūtu Dažādi fona atkārtojumi vietnē CodePen.

Vēl viena demo izmēra maiņa, parādot “viltus” robežu:


Programmā CodePen skatiet ShopTalk Show (@shoptalkshow) vienkāršo attēlu ar pildspalvu piestiprinātu robežas attēlu
.

Lūk, vēl viena jautra demonstrācija ar hamburgeru demonstrēšanu background-repeat: round;.

Saistīts

  • fona piestiprināšana
  • fona klips
  • fona krāsa
  • fona attēls
  • fona izcelsme
  • background-position
  • fona lielums

Resursi

  • CSS3 Spec
  • MDN

Pārlūka atbalsts

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

Ar komatiem atdalīta vairāku vērtību sintakse tiek atbalstīta tikai pārlūkprogrammās Firefox 3.6+ un IE 9+. Divu vērtību sintakse horizontālo un vertikālo vērtību kontrolei tiek atdalīta tikai Firefox 13+ un IE 9+. roundUn spaceatslēgvārdi ir tikai Firefox 49+ un IE 9.