CSS fono paveikslėlio dydžio pamoka - kaip užkoduoti viso puslapio fono paveikslėlį

Šioje pamokoje bus parodytas paprastas būdas koduoti viso puslapio fono paveikslėlį naudojant CSS. Jūs taip pat sužinosite, kaip padaryti tą vaizdą pritaikomą prie jūsų vartotojų ekrano dydžio.

Tai, kad fono paveikslėlis būtų visiškai ištiestas, kad apimtų visą naršyklės peržiūros sritį, yra įprasta interneto dizaino užduotis. Laimei, šia užduotimi galima pasirūpinti keliomis CSS eilutėmis.

Uždenkite peržiūros sritį vaizdu

Pirmiausia norime įsitikinti, kad mūsų puslapis iš tikrųjų apima visą peržiūros sritį:

html { min-height: 100%; }

Viduje htmlmes naudosime background-imagenuosavybę vaizdui nustatyti:

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

„Fono dydžio“ savybės magija

Magija įvyksta su background-sizenuosavybe:

background-size: cover;

coverliepia naršyklei įsitikinti, kad vaizdas visada apima visą konteinerį, šiuo atveju html. Naršyklė uždengs talpyklą, net jei ji turės ištempti vaizdą arba šiek tiek nukirpti kraštus.

Kadangi naršyklė gali ištempti vaizdą, turėtumėte naudoti pakankamai didelės raiškos fono paveikslėlį. Priešingu atveju vaizdas gali atrodyti pikselių.

Jei jums rūpi, kad visas vaizdas būtų rodomas fone, turėtumėte įsitikinti, kad vaizdas yra santykinai artimas formato santykiu, palyginti su ekrano dydžiu.

Kaip tiksliai sureguliuoti vaizdo padėtį ir išvengti plytelių

Naršyklė taip pat gali pasirinkti rodyti fono vaizdą kaip plyteles, atsižvelgiant į jo dydį. Norėdami to išvengti, naudokite no-repeat:

background-repeat: no-repeat;

Kad viskas būtų gražu, mes visada išlaikysime savo įvaizdį:

background-position: center center;

Tai visą laiką centruos vaizdą tiek horizontaliai, tiek vertikaliai.

Dabar mes sukūrėme visiškai reaguojantį vaizdą, kuris visada apims visą foną:

html { min-height: 100%; background-image: url(image.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; } 

Kaip pataisyti paveikslėlį vietoje slinkdami

Dabar, jei norite pridėti teksto ant fono paveikslėlio ir tekstas perpildys dabartinę peržiūros sritį, galbūt norėsite įsitikinti, kad jūsų vaizdas lieka fone, kai vartotojas slenka žemyn, kad pamatytų likusį tekstą:

background-attachment: fixed;

Visas aukščiau aprašytas fono ypatybes galite įtraukti naudodami trumpą užrašą:

background: url(image.jpg) center center cover no-repeat fixed;

Pasirenkama: kaip pridėti medijos užklausą mobiliesiems

Jei norite pridėti šiek tiek glaisto ant torto, galbūt norėsite pridėti medijos užklausą mažesniems ekranams:

@media only screen and (max-width: 767px) { html { background-image: url(smaller-image.jpg); } } 

Galite naudoti „Photoshop“ ar kitą vaizdų redagavimo programinę įrangą, kad sumažintumėte savo originalų vaizdą, kad pagerintumėte puslapio įkėlimo greitį mobiliajame interneto ryšyje.

Taigi dabar, kai žinote magiją, kaip sukurti jautrų viso puslapio vaizdo foną, atėjo laikas sukurti gražių svetainių!

Norite pamatyti daugiau žiniatinklio kūrimo patarimų ir žinių?

  • Prenumeruokite mano savaitinį naujienlaiškį
  • Apsilankykite mano tinklaraštyje 1000 mylių pasaulyje
  • Sekite mane „Twitter“