Donu vian retpaĝan vidpunkton kun fono-grafikaĵoj
Bildoj estas grava parto de allogaj retejaj desegnoj. Ĉi tio inkluzivas la uzon de fono bildoj. Ĉi tiuj estas la bildoj kaj grafikaĵoj, kiuj estas uzataj malantaŭ tekstoj, kontraŭaj al bildoj, kiuj estas prezentitaj kiel parto de la enhavaj paĝoj. Ĉi tiuj fonaj bildoj povas aldoni vidan intereson al paĝo kaj helpi vin atingi la vidan dezajnon, kiun vi serĉas en paĝo.
Se vi komencas labori kun fono-bildoj, vi sendube kuros en la scenon, kie vi volas bildon por etendi la paĝon.
Ĉi tio estas precipe vera por respondemaj retejoj, kiuj estas transdonitaj al ampleksa gamo da aparatoj kaj ekranaj grandecoj .
Ĉi tiu deziro streĉi fondan bildon estas tre ofta deziro por retpaĝistoj, ĉar ne ĉiuj bildoj persvadas en la spaco de retejo. Anstataŭ fiksi fiksan grandecon, etendi la bildon ebligas al ĝi fleksiĝi por persvadi la paĝon, kiom ajn larĝa aŭ mallarĝa estas la retumilo .
La plej bona maniero por streĉi bildon por adapti la fonon de paĝo estas uzi la CSS3- posedaĵon, por fono-grandeco. Jen ekzemplo, kiu uzas fonan bildon por la korpo de paĝo kaj kiu donas la grandecon al 100% tiel ke ĝi ĉiam streĉos por persvadi la ekranon.
korpo {
fono: url (bgimage.jpg) ne-ripeto;
fono-grandeco: 100%;
}
Laŭ caniuse.com, ĉi tiu nemoveblaĵo funkcias en IE 9 +, Firefox 4 +, Opero 10.5+, Safari 5 +, Chrome 10.5 +, kaj sur ĉiuj ĉefaj moveblaj retumiloj. Ĉi tio kovras vin por ĉiuj modernaj foliumiloj haveblaj hodiaŭ, kio signifas, ke vi devas uzi ĉi tiun posedaĵon sen timo, ke ĝi ne funkcios sur la ekrano de iu.
Farante etenditan fonon en malnovaj foliumiloj
Estas tre neprobabla, ke vi bezonos subteni iujn retumilojn pli maljunajn ol IE9, sed ni supozu, ke vi interesas, ke IE8 ne subtenas ĉi tiun posedaĵon. En tiu kazo, vi povas falsi etenditan fonon. Kaj vi povas uzi la retumilojn por Firefox 3.6 (-moz-background-size) kaj Operacias 10.0 (-o-fono-grandeco).
La plej facila maniero por falsi etenditan fonan bildon estas etendi ĝin tra la tuta paĝo. Tiam vi ne finos kun ekstra spaco aŭ devas zorgi, ke via teksto kongruas en la etendita areo. Jen kiel fari ĝin:
id = "bg" />
- Unue, certigu, ke ĉiuj foliumiloj havas 100% altecon, 0 randojn, kaj 0 kompletigon sur la kaj elementoj de HTML BODY. Loku la jenon en la kapo de via HTML-dokumento:
- Aldonu la bildon, kiun vi volas esti la fono kiel la unua elemento de la retpaĝo, kaj donu al ĝi la id de "bg":
- Metu la fonan bildon tiel ke ĝi estas fiksita ĉe la supro kaj maldekstre kaj estas 100% larĝa kaj 100% alte. Aldonu tion al via stilo-folio:
img # bg {
pozicio: fiksita;
supro: 0;
maldekstra: 0;
larĝa: 100%;
alteco: 100%;
} - Aldonu vian tutan enhavon al la paĝo ene de DIV-elemento kun ido de "enhavo". Aldonu la DIV sub la bildo:
Noto: estas interesa rigardi vian paĝon nun. La bildo devas montri etendita, sed via enhavo tute mankas. Kial? Ĉar la fona bildo estas 100% alte, kaj la enhavo divido estas post la bildo en la fluo de la dokumento - plej multaj foliumiloj ne montros ĝin.Ĉiuj viaj enhavo ĉi tie - inkluzive titolaj, alineoj, ktp.
- Metu vian enhavon por ke ĝi estu relativa kaj havas z-indekson de 1. Ĉi tio alportos ĝin super la fono-bildo en normoj-plenumaj retumiloj. Aldonu tion al via stilo-folio:
#kontenta {
pozicio: relativa;
z-indekso: 1;
}
- Sed vi ne faris. Interreto Explorer 6 ne estas normoj konsentite kaj ankoraŭ havas iujn problemojn. Ekzistas multaj manieroj kaŝi la CSS de ĉiu retumilo sed IE6, sed la plej facila (kaj malpli verŝajne kaŭzi aliajn problemojn) estas uzi kondiĉojn. Metu la sekvan post via stilfolio en la kapo de via dokumento:
- En la elstara komento aldonu alian stilon de stiloj kun iuj stiloj por ricevi IE 6 por ludi belan:
- Certiĝu ankaŭ en IE 7 kaj IE 8. Vi eble bezonas ĝustigi la komentojn por subteni ilin ankaŭ. Tamen, ĝi funkciis kiam mi provis ĝin.
Bone - ĉi tio estas laŭdire VIAJ overkill. Tre malmultaj ejoj devas subteni IE 7 aŭ 8 plu, multe malpli IE6!
Kiel tia, ĉi tiu aliro estas antikva kaj verŝajne nenecesa por vi. Mi lasas ĝin ĉi tie pli kiel modelo de scivolemo pri kiom pli malfacilaj aferoj antaŭ ol ĉiuj niaj retumiloj ludis tiel bonege kune!
Farante Etendita Fona Bildo Super Plej malgranda Spaco
Vi povas uzi similan teknikon por falsi etenditan fonan bildon tra DIV aŭ alia elemento en via retpaĝo. Ĉi tio estas iom pli malfacila, ĉar vi devas uzi absolutan pozicion aŭ havi strangajn interspacajn demandojn por aliaj partoj de via paĝo.
- Metu la bildon sur la paĝo, kiun mi volas uzi kiel fono.
- En la stilo-folio, starigu larĝecon kaj altecon por la bildo. Noto, vi povas uzi procentojn por larĝeco aŭ alteco, sed mi pli facile ĝustigas ĝin kun longaj valoroj por la alteco.
img # bg {
larĝa: 20em;
alteco: 30em;
} - Metu vian enhavon en div kun la id "enhavo" kiel ni faris supre:
Ĉiuj viaj enhavo ĉi tie
- Stilo la enhavo div estu la sama larĝa kaj alteco kiel la fono-bildo:
div # content {
larĝa: 20em;
alteco: 30em;
} - Poste metu la enhavon ĝis la sama alteco kiel la bildo. Do se via bildo estas 30em vi havus stilon de supro: -30em; Ne forgesu meti z-indekson de 1 en la enhavo.
#kontenta {
pozicio: relativa;
supro: -30em;
z-indekso: 1;
larĝa: 20em;
alteco: 30em;
} - Tiam aldonu z-indekson de -1 por uzantoj de IE 6, kiel vi faris supre:
Denove, kun fono-grandeco ĝuante la larĝan retumilhelpon, ĝi nun faras, ĉi tiu aliro ankaŭ estas tre verŝajne nenecesa kaj prezentita kiel produkto de iama epoko. Se vi volas uzi ĉi tiun aliron, simple certu tion en tiom da foliumiloj kiel vi povas.
Kaj se via enhavo ŝanĝos grandecon, vi bezonos ŝanĝi la grandecon de via ujo kaj fono-bildo, alie vi finos kun strangaj rezultoj.