CSS-i taustpildi suuruse õpetus - kuidas lehele kogu lehe taustpilti kodeerida

Selles õpetuses kuvatakse lihtne viis CSS-i abil terve lehe taustpildi kodeerimiseks. Lisaks saate teada, kuidas see pilt oma kasutajate ekraani suurusele reageerida.

Taustpildi täielik sirutamine kogu brauseri vaateava katmiseks on veebidisaini puhul tavaline ülesanne. Õnneks saab selle ülesandega hakkama mõne CSS-i reaga.

Kaane vaateava pildiga

Esiteks tahame veenduda, et meie leht katab tegelikult kogu vaateava:

html { min-height: 100%; }

Toas htmlkasutame background-imagepildi määramiseks atribuuti:

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

Tausta suurusega vara maagia

Maagia toimub background-sizevaraga:

background-size: cover;

coverkäsib brauseril veenduda, et pilt kataks sel juhul kogu konteineri html. Brauser katab konteineri ka siis, kui see peab pilti venitama või servadest natuke lahti lõikama.

Kuna brauser võib pilti venitada, peaksite kasutama piisavalt suure eraldusvõimega taustpilti. Vastasel juhul võib pilt ilmuda pikslitena.

Kui soovite, et kogu pilt ilmuks taustale, peaksite veenduma, et pilt oleks ekraani suurusega võrreldes suhteliselt lähedane.

Kuidas pildi asukohta peenhäälestada ja plaate vältida

Brauser saab valida ka teie taustpildi kuvamise paanidena, olenevalt selle suurusest. Selle vältimiseks kasutage no-repeatjärgmist.

background-repeat: no-repeat;

Et asjad oleksid ilusad, hoiame oma pildi alati keskmes:

background-position: center center;

See koondab pildi kogu aeg nii horisontaalselt kui ka vertikaalselt.

Nüüd oleme loonud täielikult reageeriva pildi, mis katab alati kogu tausta:

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

Kuidas kerimise ajal pilti paigas parandada

Nüüd, igaks juhuks, kui soovite taustpildi peale teksti lisada ja see tekst ületab praeguse vaateava, võiksite olla kindel, et teie pilt jääb taustale, kui kasutaja kerib ülejäänud teksti nägemiseks:

background-attachment: fixed;

Lühikese tähistusega saate kaasata kõik ülalkirjeldatud taustaomadused:

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

Valikuline: kuidas lisada meediumipäringut mobiilile

Tordile jäätumise lisamiseks võiksite lisada meediumipäringu väiksemate ekraanide jaoks:

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

Algse pildi vähendamiseks võite kasutada Photoshopi või mõnda muud pilditöötlustarkvara, et parandada mobiilse Interneti-ühenduse lehe laadimise kiirust.

Nii et nüüd, kui teate reageeriva, kogu lehe pildi tausta loomise võlu, on aeg minna looma ilusaid veebisaite!

Kas soovite näha rohkem veebiarenduse näpunäiteid ja teadmisi?

  • Telli minu iganädalane uudiskiri
  • Külastage minu blogi aadressil 1000 miili maailm
  • Jälgi mind Twitteris