Ang kakayahang iunat ang imahe ng background sa buong lapad ng window ng browser gamit ang CSS ay lumitaw lamang sa pagpapalabas ng pinakabagong detalye nito - CSS3. Sa kasamaang palad, sa ngayon isang malaking bilang ng mga web surfer ang gumagamit ng mga maagang browser na hindi nauunawaan ang pagtutukoy ng CSS3. Samakatuwid, kailangan mong pumili - alinman sa gumamit ng isang hindi gaanong maginhawa, ngunit solusyon sa cross-browser, o isang high-tech, ngunit para sa isang limitadong madla. Isaalang-alang natin ang parehong mga pagpipilian.
Kailangan
Pangunahing kaalaman sa HTML at CSS
Panuto
Hakbang 1
Ang unang pagpipilian ay batay sa naunang mga pagtutukoy ng wikang CSS. Kailangan mong lumikha ng isang istraktura ng HTML code na mayroong dalawang magkakapatong na mga layer, isa sa itaas ng isa pa. Ang mga layer (div) ay maaaring maunat sa lapad ng screen sa lumang pagtutukoy ng istilo ng estilo ng cascading na pagtutukoy. Sa ilalim ng mga layer kailangan mong ilagay ang imahe sa background, at sa tuktok ay mailalagay ang lahat ng nilalaman ng pahina. Ang ganitong istraktura sa katawan ng dokumento ay maaaring ganito:
Ito ang magiging nilalaman ng pahina
At ang paglalarawan ng mga estilo para sa istrakturang ito ay dapat ilagay sa heading na bahagi. Halimbawa, ito:
html, katawan {
margin: 0px;
taas: 100%;
}
#background {
posisyon: ganap;
lapad: 100%;
taas: 100%;
}
#body {
posisyon: ganap;
lapad: 100%;
taas: 100%;
z-index: 2;
}
Narito ang mga layer na may background ng mga ID (ito ang iyong imahe sa background) at katawan (ito ang layer para sa nilalaman ng pahina) ay nakatakda sa ganap na pagpoposisyon at 100% ang lapad at taas. Bilang karagdagan, ang layer ng nilalaman ay nakatalaga ng isang serial number z-index = 2. Tinutukoy nito ang "lalim" ng mga layer - mas malaki ito, mas malayo mula sa "ilalim" na matatagpuan ang layer na ito. Sa aming kaso, ito ay nasa itaas ng layer ng background, na gumagamit ng default na z-index.
Hakbang 2
Maaaring ganito ang hitsura ng kumpletong code:
html, katawan {
margin: 0px;
taas: 100%;
}
#background {
posisyon: ganap;
lapad: 100%;
taas: 100%;
}
#body {
posisyon: ganap;
lapad: 100%;
taas: 100%;
z-index: 2;
}
Ito ang magiging nilalaman ng pahina
Huwag kalimutang palitan ang pangalan ng file ng imahe ng background na fon.png.
Hakbang 3
Ang pangalawang pagpipilian ay gagamitin ang laki ng background na pag-aari na ipinakilala sa CSS3. Sa parehong oras, magdagdag ng mga katulad na katangian sa mga kahulugan ng estilo na dating ginamit ng mga browser na Mozilla Firefox, Google Chrome at Opera. Maaaring ganito ang hitsura ng block ng paglalarawan ng estilo sa bersyon na ito:
html {
background: url (fon.png) hindi na ulit na center center naayos;
-webkit-background-size: takip;
-moz-background-size: takip;
-o-background-size: takip;
background-size: takip;
}
At dito huwag kalimutan na palitan ang pangalan ng file ng imahe ng background na fon.png. At sa katawan mismo ng dokumento, walang mga espesyal na konstruksyon ang kinakailangan sa bersyon na ito.
