Nykyään responsiivisilla taustakuvilla varustetut verkkosivustot ovat kysyttyjä. Responsiiviset verkkosivustot tarjoavat käyttäjille ihanteellisen käyttökokemuksen lähes kaikilla laitteilla, mukaan lukien matkapuhelimet, tabletit tai pöytäkoneet. Responsiiviset kuvat voivat mukauttaa verkkosivuston taustaa, näytön kokoa ja mittoja. Responsiiviset kuvat varmistavat, että laatu ja mittasuhteet säilyvät. Lisäksi responsiivisilla taustakuvilla varustettu verkkosivusto latautuu nopeasti.
Tämä opas antaa ohjeita taustakuvien mukauttamiseen näytön mittoihin.
Kuinka mukauttaa taustakuvia näytön mittoihin?
Kuva voi mukautua näytön mittoihin noudattamalla alla olevia vaiheittaisia ohjeita.
Vaihe 1: Luo HTML-rakenne
Luo ensin HTML-rakenne ja lisää ulkoinen tyylisivu käyttämällä
< html >
< pää >
< linkki rel = 'tyylitaulukko' href = 'tyyli.css' >
< otsikko > Responsiivinen taustakuva otsikko >
pää >
< kehon >
-- Alue, johon voit lisätä muuta sisältöä-- >
kehon >
html >
Vaihe 2: Ota CSS käyttöön
Käytä nyt CSS:ää ' kehon ”-osio. Määritä ensin taustakuva. Käytä tähän tarkoitukseen ' taustakuva ' ja määritä ' url() ”-arvo, joka sisältää kuvatiedoston osoitteen.
Käytä sen jälkeen ' taustakuva ' määrittääksesi kuvan koon, ' taustatoisto ' -ominaisuutta kuvan toiston määrittämiseksi ja ' tausta-liite ” määrittääksesi vierittääkö kuva sivun muun osan kanssa vai ei. Aseta lopuksi ' marginaali ' ja ' pehmuste ”–” 0 ”:
kehon {taustakuva: url ( 'testikuva.jpg' ) ;
taustan koko: 100 % 100 % ;
/* Skaalaa kuva kokoon 100 % leveys ja 100 % korkeus */
taustatoisto: ei toistoa;
taustaliite: kiinteä;
marginaali: 0 ;
pehmuste: 0 ;
/* Valinnainen: kiinteä tausta */
}
Lähtö
Tämä on tulos ennen selainikkunan sulkemista:
Selaimen supistumisen jälkeen:
Yllä oleva tulos vahvistaa, että kuva on mukauttanut taustan näytön mittoihin.
Johtopäätös
Jos haluat mukauttaa taustakuvat näytön mittoihin, sisällytä ensin ' näkymä ” pääosassa hallitaksesi mittoja ja skaalausta. Luo sitten HTML-rakenne ja käytä CSS:ää. Aseta CSS:ssä ' taustan kokoinen ' kiinteistön arvo ' peite ”-arvo skaalata kuvan korkeutta ja leveyttä. Tässä artikkelissa on esitetty täydellinen opas taustakuvien mukauttamiseen näytön mittoihin.