Kui background-image
vara on määratud, background-repeat
vara CSS määratleb kui (ja kuidas) see kordub. Siin on näide:
html ( background-image: url(logo.png.webp); background-repeat: repeat-x; )
Need on selle atribuudi võimalikud väärtused (lisaks tavalistele asjadele inherit
):
repeat
: paani pilt mõlemas suunas. See on vaikeväärtus.repeat-x
: pane pilt horisontaalseltrepeat-y
: pane pilt vertikaalselt paanileno-repeat
: ära pane, vaid näita pilti üks kordspace
: paani pilt mõlemas suunas. Ärge kunagi kärpige pilti, kui üks pilt ei ole selle mahutamiseks liiga suur. Kui mahub mitu pilti, asetage need välja piltidele, puudutades alati servi.round
: paani pilt mõlemas suunas. Ärge kunagi kärpige pilti, kui üks pilt ei ole selle mahutamiseks liiga suur. Kui ruumi mahajäämisel mahub mitu pilti, siis tühjendage need või venitage need ruumi täitmiseks. Kui pildi laiusest on vähem kui pool, venitage, kui rohkem, venitage.
Samuti on kaks väärtuse süntaksit:
.element ( /* background-repeat: horizontal vertical */ background-repeat: repeat space; background-repeat: repeat repeat; background-repeat: round space; )
Mis muudab ühe väärtusega süntaksid kahe väärtusega süntaksiks lihtsalt lühidaks. Näiteks round
on tõesti round round
.
Samuti võite komaga eraldada mitu väärtust, kui tegemist on mitme taustaga.
Demo
Vaadake CodePenil
CSS-
Tricksi (@ css-tricks) pliiatsi taustakorda
Interaktiivne demo selle kohta, kuidas space
ja kuidas round
, võrreldes järgmisega repeat
:
Vaadake
Chris Coyieri (@chriscoyier) pliiatsit Erinevad taustakordused
CodePenis.
Teine demo suuruse muutmine, millel on „võlts” piir:
Vaadake
CodePeni
saidil ShopPalk Show (@shoptalkshow) pliiatsiga varustatud piiripilti lihtsal viisil.
Siin on veel üks lõbus demo, kus demonstreeritakse hamburgereid background-repeat: round;
.
Seotud
- taust-kinnitus
- taustklipp
- taustavärv
- taustapilt
- taust-päritolu
- taust-positsioon
- tausta suurus
Ressursid
- CSS3 spetsifikatsioon
- MDN
Brauseri tugi
Chrome | Safari | Firefox | Ooper | IE | Android | iOS |
---|---|---|---|---|---|---|
1+ | 1+ | 1+ | 3,5+ | 4+ | 1+ | 1+ |
Komaeraldusega mitme väärtusega süntat toetab ainult Firefox 3.6+ ja IE 9+. Kaheväärtuslikku süntaksit horisontaalsete ja vertikaalsete väärtuste kontrollimiseks toetab ainult Firefox 13+ ja IE 9+. round
Ja space
märksõnad on ainult Firefox 49+ ja IE 9+.