Ekzekuti la teknikon per CSS
Se vi desegnas retejon, vi eble interesiĝas lerni kiel krei fiksan fonan bildon aŭ filigrejon sur retpaĝaro. Ĉi tio estas komuna dezajno, kiu estis populara interrete por sufiĉe da tempo. Ĝi estas oportuna efiko havi en via retejo dezajno sako de lertaĵoj.
Se vi ne faris tion antaŭe aŭ provis ĝin sen sorto, la procezo ŝajnas timiganta, sed fakte ne tre malfacilas. Kun ĉi tiu mallonga lernilo, vi ricevos la informojn, kiujn vi bezonos por regi la teknikon en demando de minutoj per CSS.
Komencante
Fona bildoj aŭ akvomarkoj (kiuj vere estas nur malpeza fono-bildoj) havas historion en presita dezajno. Dokumentoj longtempe inkludis akvomarkojn por neebligi ilin kopii. Aldone multaj folioj kaj broŝuroj uzas grandajn fonojn bildojn kiel parton de la desegno por la presita peco. Reta desegno havas longajn pruntitajn stilojn de presaĵo kaj fono bildoj estas unu el ĉi pruntitaj stiloj.
Ĉi tiuj grandaj fono-bildoj estas facile krei uzante la jenajn tri CSS-stilojn :
- fono-bildo
- fono-ripeto
- fono-alligiteco
- fono-grandeco
Fona-Bildo
Vi uzos fonan bildon por difini la bildon, kiu estos uzata kiel via filigrano. Ĉi tiu stilo simple uzas dosieron-vojon por ŝarĝi bildon, kiun vi havas en via retejo, verŝajne en dosierujo nomata "bildoj".
fono-bildo: url (/images/page-background.jpg);
Gravas, ke la bildo mem estas pli malpeza aŭ pli travidebla ol normala bildo. Ĉi tio kreos, ke "filigrano" aspektas, en kiu duone travidebla bildo malantaŭ la teksto, grafikaĵoj kaj aliaj ĉefaj elementoj de la retpaĝo. Sen ĉi tiu paŝo, la fono-bildo konkurencas kun la informo sur via paĝo kaj malfaciligos ĝin legi.
Vi povas ŝanĝi la fonan bildon en ajna redakta programo kiel Adobe Photoshop.
Fona-ripeto
La fono-ripeta proprieto venas poste. Se vi deziras, ke via bildo estas granda vigvarforma grafikaĵo, vi uzus ĉi tiun proprieton por ke tiu bildo nur prezentiĝu.
fono-ripeto: ne-ripeto;
Sen la "ne-ripetata" propraĵo, la defaŭlta estas, ke la bildo ripetos denove kaj denove denove sur la paĝo. Ĉi tio estas nedezirable en plej modernaj retpaĝaj dezajnoj, do ĉi tiu stilo devus esti konsiderita esenca en via CSS.
Fona-Alligiteco
Fona-alligiteco estas posedaĵo, kiun multaj retejo-projektantoj forgesas pri. Uzante ĝin konservas vian fonan bildon riparitan kiam vi uzas la "fiksitan" proprieton. Jen kio turnas tiun bildon en filigrano kiu estas fiksita sur la paĝo.
La defaŭlta valoro por ĉi tiu propraĵo estas "rulumu". Se vi ne specifas fonon-alliga valoro, la fono movos kune kun la resto de la paĝo.
fono-alligiteco: fiksita;
Fona-Grandeco
Fona grandeco estas pli nova CSS-posedaĵo. Ĝi permesas al vi agordi la grandecon de fono bazita sur la vidujo en kiu ĝi estas vidata. Ĉi tio estas tre helpema por respondemaj retejoj, kiuj montros ĉe malsamaj grandecoj en malsamaj aparatoj .
fono-grandeco: kovrilo;
Du helpema valoro, kiun vi povas uzi por ĉi tiu posedaĵo, inkluzivas:
- Kovrilo - Skaloj la fono do aŭ la plena larĝo aŭ plena alteco estas montrita. Ĉi tio signifas, ke iuj partoj de la bildo eble ne aperas sur la ekrano sed ke la tuta areo estos kovrita.
- Enhavas - Skaloj la bildon tiel la tuta larĝa kaj alteco estas montrita en la areo stiligita. La bildo ne estas malplenigita, sed la malfavoraĵo estas, ke partoj de la areo eble ne estas kovritaj de la bildo.
Aldonante la CSS al via paĝo
Post kiam vi komprenas la supre propraĵojn kaj iliajn valorojn, vi povas aldoni tiujn stilojn al via retejo.
Aldonu la jenan al la HEAD de via retpaĝaro se vi faras unu-paĝan ejon. Aldonu ĝin al la CSS-stiloj de ekstera stilo-folio se vi konstruas mult-paĝan ejon kaj volas utiligi la potencon de ekstera folio.
korpo {
fono-bildo: url (/images/page-background.jpg);
fono-ripeto: ne-ripeto;
fono-alligiteco: fiksita;
fono-grandeco: kovrilo;
}
// ->
Ŝanĝi la URL de via fono-bildo por egali la specifan dosiernomon kaj dosieron, kiu estas grava al via retejo. Faru aliajn taŭgajn ŝanĝojn por persvadi vian dezajnon kaj vi havos filigrano.
Vi povas Specifi Pozicion, Tro
Se vi volas loki la filigrano en specifa loko sur via retpaĝaro, vi ankaŭ povas tion fari. Ekzemple, vi eble volas la filigrejon en la mezo de la paĝo aŭ eble en la malalta angulo, kontraŭe al la supra angulo, kiu estas la defaŭlta.
Por fari tion aldonu la posedan posedon al via stilo. Ĉi tio metos la bildon en la preciza loko, kiun vi ŝatus aperi. Vi povas uzi pikselajn valorojn, procentojn aŭ alineojn por atingi tiun pozicion de pozicio.
fono-pozicio: centro;