Uwezo wa kunyoosha picha ya usuli kwa upana kamili wa dirisha la kivinjari ukitumia CSS ilionekana tu na kutolewa kwa ufafanuzi wake wa hivi karibuni - CSS3. Kwa bahati mbaya, hadi sasa idadi kubwa ya wavinjari wa wavuti wanatumia vivinjari vya mapema ambavyo havielewi vipimo vya CSS3. Kwa hivyo, lazima ufanye uchaguzi - ama utumie suluhisho rahisi, lakini kivinjari cha kuvinjari, au teknolojia ya hali ya juu, lakini kwa hadhira ndogo. Wacha tuchunguze chaguzi zote mbili.
Muhimu
Ujuzi wa kimsingi wa HTML na CSS
Maagizo
Hatua ya 1
Chaguo la kwanza linategemea maelezo ya awali ya lugha ya CSS. Unahitaji kuunda muundo wa nambari ya HTML ambayo ina safu mbili zinazoingiliana, moja juu ya nyingine. Tabaka (div) zinaweza kunyooshwa kwa upana wa skrini katika mtindo wa zamani wa kuelezea ufafanuzi wa lugha. Chini ya tabaka unahitaji kuweka picha ya nyuma, na juu itaweka yaliyomo kwenye ukurasa. Muundo kama huo katika mwili wa waraka unaweza kuonekana kama hii:
Hii itakuwa yaliyomo kwenye ukurasa
Na maelezo ya mitindo ya muundo huu inapaswa kuwekwa kwenye sehemu inayoongoza. Kwa mfano, hii:
html, mwili {
margin: 0px;
urefu: 100%;
}
# uwanja wa nyuma {
msimamo: kabisa;
upana: 100%;
urefu: 100%;
}
# mtu {
msimamo: kabisa;
upana: 100%;
urefu: 100%;
z-index: 2;
}
Hapa kuna tabaka zilizo na usuli wa vitambulisho (hii ni picha yako ya nyuma) na mwili (hii ni safu ya yaliyomo kwenye ukurasa) imewekwa kwenye nafasi kamili na upana na urefu wa 100% Kwa kuongezea, safu ya yaliyomo imepewa nambari ya serial z-index = 2. Inaamua "kina" cha tabaka - kubwa zaidi, zaidi kutoka "chini" safu hii iko. Kwa upande wetu, itakuwa juu ya safu ya nyuma, ambayo hutumia default z-index.
Hatua ya 2
Nambari kamili inaweza kuonekana kama hii:
html, mwili {
margin: 0px;
urefu: 100%;
}
# uwanja wa nyuma {
msimamo: kabisa;
upana: 100%;
urefu: 100%;
}
# mtu {
msimamo: kabisa;
upana: 100%;
urefu: 100%;
z-index: 2;
}
Hii itakuwa yaliyomo kwenye ukurasa
Usisahau kuchukua nafasi ya jina la faili ya picha ya nyuma fon.png.
Hatua ya 3
Chaguo la pili litatumia mali ya saizi-asili iliyoletwa katika CSS3. Wakati huo huo, ongeza mali sawa kwa ufafanuzi wa mtindo ambao hapo awali ulitumiwa na vivinjari Mozilla Firefox, Google Chrome na Opera. Kizuizi cha maelezo ya mtindo katika toleo hili kinaweza kuonekana kama hii:
html {
msingi: url (fon.png) kituo cha kurudia kisichorekebishwa kimewekwa;
-webkit-background-size: kifuniko;
-moz-background-size: kifuniko;
-o-background-size: kifuniko;
saizi ya nyuma: kifuniko;
}
Na hapa usisahau kuchukua nafasi ya jina la faili ya picha ya nyuma fon.png. Na katika mwili wa hati yenyewe, hakuna ujenzi maalum unahitajika katika toleo hili.
