Tänapäeval on nõudlikud responsiivse taustapildiga veebisaidid. Reageerivad veebisaidid pakuvad kasutajatele ideaalset kasutuskogemust peaaegu kõigis seadmetes, sealhulgas mobiiltelefonides, tahvelarvutites või lauaarvutites. Reageerivad pildid võivad kohandada veebisaidi tausta, ekraani suurust ja mõõtmeid. Tundlikud pildid tagavad kvaliteedi ja proportsioonide säilimise. Lisaks laaditakse kiiresti reageerivate taustapiltidega veebisait.
See juhend annab juhiseid taustapiltide kohandamiseks ekraani mõõtmetega.
Kuidas kohandada taustapilte ekraani mõõtmetega?
Pilti saab kohandada ekraani mõõtmetega, järgides alltoodud astmelisi juhiseid.
1. samm: looge HTML-struktuur
Esmalt looge HTML-struktuur ja lisage väline stiilileht, kasutades HTML-i peaosas. Selleks asetage lihtsalt ' ” peasildi sees. ' rel ” märgend määrab faili seose HTML-dokumendiga. ' href ” märgend määrab CSS-faili aadressi:
< html >
< pea >
< link rel = 'laadileht' href = 'stiil.css' >
< pealkiri > Tundlik taustapilt pealkiri >
pea >
< keha >
-- ala muu sisu lisamiseks-- >
keha >
html >
2. samm: rakendage CSS-i
Nüüd rakendage CSS-i ' keha ” jaotis. Esmalt määrake taustpilt. Selleks kasutage ' taustapilt ” ja määrake „ url() ” väärtus, mis sisaldab pildifaili aadressi.
Pärast seda kasutage ' taustapilt ', et määrata pildi suurus, ' taustakordus ' atribuut pildi korduse määramiseks ja ' tausta-manuse ”, et määrata, kas pilt kerib koos ülejäänud leheküljega või mitte. Lõpuks määrake ' marginaal ” ja „ polsterdus ' kuni ' 0 ”:
keha {taustapilt: url ( 'test-image.jpg' ) ;
tausta suurus: 100 % 100 % ;
/* Kujutise mõõtkava 100 % laius ja 100 % kõrgus */
background-repeat: no-repeat;
tausta-manus: fikseeritud;
marginaal: 0 ;
polsterdus: 0 ;
/* Valikuline: fikseeritud taust */
}
Väljund
See on väljund enne brauseriakna kokkuleppimist:
Pärast brauseri kokkutõmbumist:
Ülaltoodud väljund kinnitab, et pilt on kohandanud tausta vastavalt ekraani mõõtmetele.
Järeldus
Taustapiltide kohandamiseks ekraani mõõtmetega lisage esmalt ' vaateava ” peaosas, et kontrollida mõõtmeid ja skaleerimist. Seejärel looge HTML-i struktuur ja rakendage CSS-i. CSS-is määrake ' tausta suurus ' vara väärtus väärtusele ' kaas ” väärtus pildi kõrguse ja laiuse skaleerimiseks. Selles artiklis on esitatud täielik juhend taustapiltide kohandamiseks ekraani mõõtmetega.