În această lecție vă voi arăta cum să creați un efect dublu de imagine de fundal folosind CSS.
Această lecție a fost pregătită de bloggerul american www.SohTanaka.com. Originalul este aici.
În mod normal, atunci când se creează intinde imaginea de fundal folosind CSS, avem nevoie pentru a face o fotografie de dimensiunea prezumtiv imaginii de fundal si repeta de X ori pentru a umple întreaga pagină pe orizontală. Desigur, în scopul de a obține rezultate perfecte capac un site ar trebui să se amestece cu imaginea de fundal de pe ambele părți.
Tehnica tipică de întindere
Această parte a imaginii va fi repetată până când pagina este plină.
În exemplul nostru, avem nevoie de o imagine de fundal care va fi repetată în stânga și în dreapta capacelor. Cum se realizează acest lucru?
Tehnica duală de imagine de fundal
Trebuie să repetăm ambele desene (stânga și dreapta) pentru a obține acest efect.
Din păcate, versiunea curentă a CSS nu este capabilă să facă față imaginilor de fundal dublu. Sper că în viitor acest lucru se va schimba.
Efect de fundal dublu
Soluția este de a folosi 2 imagini care se repetă (una pentru partea dreaptă și una pentru stânga).
Pentru o imagine duplicată din stânga, vom adăuga un etichetă tapet la etichetă
. Apoi, pentru a rezolva problema cu partea dreaptă, adăugăm un strat suplimentarcorp <>
Aici setăm fundalul pentru partea stângă
#bg_wrap <>
Apoi vom crea a doua jumătate, adăugând poziția absolută, care va fi atașată la dreapta
.recipient
Această clasă va fi containerul întregului conținut. Aici definim lățimea, culoarea de fundal, alinierea centrului și poziția "relativă".
Asta e gata! Mult noroc!
Prin obținerea de informații imediat prin două canale (vedere și auz), eficiența predării este mult mai mare decât învățarea din cărți. Și temele și testele online vă vor permite să gândiți constant în limba pe care o învățați și să vă verificați imediat cunoștințele!
Dacă doriți să învățați HTML mult timp, atunci am o veste bună pentru dvs.!
Dacă ați învățat deja HTML și doriți să treceți mai departe, următorul pas este să învățați tehnologia CSS.
Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!
Articole similare
Trimiteți-le prietenilor: