Iespēja izstiept fona attēlu līdz pārlūkprogrammas loga platumam, izmantojot CSS, parādījās tikai ar tā jaunākās specifikācijas - CSS3 - izlaišanu. Diemžēl līdz šim liela daļa tīmekļa sērfotāju izmanto agrīnās pārlūkprogrammas, kuras nesaprot CSS3 specifikāciju. Tādēļ jums ir jāizdara izvēle - vai nu izmantojiet mazāk ērtu, bet starp pārlūkprogrammām pieejamu risinājumu, vai arī augsto tehnoloģiju, bet ierobežotai auditorijai. Apsvērsim abas iespējas.
Nepieciešams
HTML un CSS pamatzināšanas
Instrukcijas
1. solis
Pirmais variants ir balstīts uz iepriekšējām CSS valodas specifikācijām. Jums jāizveido HTML koda struktūra, kurai ir divi slāņi, kas pārklājas, viens virs otra. Slāņus (div) var izstiept līdz ekrāna platumam vecajā kaskādes stila apraksta valodas specifikācijā. Slāņu apakšdaļā jums jāievieto fona attēls, bet augšējā - viss lapas saturs. Šāda struktūra dokumenta pamattekstā varētu izskatīties šādi:
Tas būs lapas saturs
Šīs struktūras stilu apraksts jāievieto virsraksta daļā. Piemēram:
html, body {
piemale: 0px;
augstums: 100%;
}
#background {
pozīcija: absolūta;
platums: 100%;
augstums: 100%;
}
#body {
pozīcija: absolūta;
platums: 100%;
augstums: 100%;
z-indekss: 2;
}
Šeit slāņi ar ID fonu (tas ir jūsu fona attēls) un pamatteksts (tas ir lapas satura slānis) ir iestatīts uz absolūto pozicionēšanu un 100% platumu un augstumu. Turklāt satura slānim tiek piešķirts sērijas numurs z-index = 2. Tas nosaka slāņu "dziļumu" - jo lielāks tas ir, jo tālāk no "apakšas" šis slānis atrodas. Mūsu gadījumā tas atradīsies virs fona slāņa, kurā tiek izmantots noklusējuma z-indekss.
2. solis
Pilns kods varētu izskatīties šādi:
html, body {
piemale: 0px;
augstums: 100%;
}
#background {
pozīcija: absolūta;
platums: 100%;
augstums: 100%;
}
#body {
pozīcija: absolūta;
platums: 100%;
augstums: 100%;
z-indekss: 2;
}
Tas būs lapas saturs
Neaizmirstiet aizstāt fona attēla faila nosaukumu fon.png.
3. solis
Otrajā variantā tiks izmantots fona lieluma rekvizīts, kas ieviests CSS3. Tajā pašā laikā pievienojiet līdzīgas īpašības stila definīcijām, kuras iepriekš izmantoja pārlūkprogrammas Mozilla Firefox, Google Chrome un Opera. Stila apraksta bloks šajā versijā var izskatīties šādi:
html {
fons: URL (fon.png) nav atkārtots centra centrs fiksēts;
-webkit-background-size: vāks;
-moz-background-size: vāks;
-ofona izmērs: vāks;
fona lielums: vāks;
}
Un šeit neaizmirstiet aizstāt fona attēla faila nosaukumu fon.png. Un pašā dokumenta pamattekstā šajā versijā nav nepieciešamas īpašas konstrukcijas.
