Fonas pakartoti - CSS-gudrybės

Anonim

Jei background-imagenurodoma background-repeatypatybė, CSS ypatybė apibrėžia, ar (ir kaip) ji kartosis. Štai pavyzdys:

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

Šios yra galimos šios nuosavybės vertės (be įprastų dalykų inherit):

  • repeat: išklijuokite vaizdą į abi puses. Tai yra numatytoji reikšmė.
  • repeat-x: išklokite vaizdą horizontaliai
  • repeat-y: išklokite vaizdą vertikaliai
  • no-repeat: nedėti plytelių, tiesiog vieną kartą parodyti vaizdą
  • space: išklijuokite vaizdą į abi puses. Niekada neapkarpykite vaizdo, nebent vienas vaizdas yra per didelis, kad tilptų. Jei telpa keli vaizdai, atlaisvinkite juos, kad vaizdai visada liestų kraštus.
  • round: išklijuokite vaizdą į abi puses. Niekada neapkarpykite vaizdo, nebent vienas vaizdas yra per didelis, kad tilptų. Jei keli vaizdai gali tilpti į likusią erdvę, pritraukite juos arba ištempkite, kad užpildytumėte vietą. Jei liko mažiau nei pusė vieno vaizdo pločio, ištempkite, jei jo daugiau, ištempkite.

Taip pat yra dviejų reikšmių sintaksė:

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

Dėl to vienos vertės sintaksės yra tiesiog dviejų vertybių sintaksės trumpinys. Pavyzdžiui, roundyra tikrai round round.

Taip pat galite atskirti kelias reikšmes kableliais, jei turite kelis fonus.

Demonstracija

Peržiūrėkite „ CSP
-Tricks
“ rašiklio rašymo fono pakartojimą (@ css-tricks) „CodePen“.

Interaktyvi demonstracija apie tai, kaip spaceir kaip rounddirbti, palyginti su repeat:

Žiūrėkite
„Chris Coyier“ (@chriscoyier) skirtingą „ Pen The Different“ fono pakartojimą „
CodePen“.

Kitas demo dydžio keitimas, rodantis „netikrą“ sieną:


„CodePen“ svetainėje „ShopTalk Show“ (@shoptalkshow) žiūrėkite „Pen Function Border Image“
.

Štai dar vienas įdomus demonstracinis demonstravimas su mėsainiais background-repeat: round;.

Susijęs

  • prisirišimas prie fono
  • fono klipas
  • fono spalva
  • fonas-vaizdas
  • fono kilmė
  • fonas-padėtis
  • fono dydis

Ištekliai

  • CSS3 Spec
  • MDN

Naršyklės palaikymas

„Chrome“ „Safari“ „Firefox“ Opera T.Y „Android“ „iOS“
1+ 1+ 1+ 3,5 ir daugiau 4+ 1+ 1+

Kableliais atskirtų kelių reikšmių sintaksą palaiko tik „Firefox 3.6+“ ir „IE 9+“. Dviejų reikšmių sintaksė, skirta atskirti horizontalias ir vertikalias vertes, palaikoma tik „Firefox 13+“ ir „IE 9+“. roundIr spacežodžiai yra tik "Firefox" 49+ ir IE 9+.