Executați tehnica folosind CSS
Dacă proiectați un site web, puteți fi interesat să învățați cum să creați o imagine fixă de fond sau un filigran pe o pagină web. Acesta este un tratament comun de design care a fost popular online de ceva timp. Este un efect la îndemână de a avea în geanta dvs. de web design de trucuri.
Dacă nu ați făcut acest lucru înainte sau ați încercat-o anterior fără noroc, procesul ar părea intimidant, dar de fapt nu este deloc dificil. Cu acest tutorial scurt, veți obține informațiile necesare pentru a stăpâni tehnica în câteva minute folosind CSS.
Noțiuni de bază
Imaginile de fundal sau filigranele (care sunt într-adevăr imagini de fond foarte ușoare) au o istorie în designul imprimat. Documentele au inclus de mult filigrane pe ele pentru a împiedica copierea acestora. În plus, multe pliante și broșuri utilizează imagini de fundal mari ca parte a designului piesei tipărite. Designul web are stiluri împrumutate de mult timp din imprimat și imaginile de fundal sunt unul dintre aceste stiluri împrumutate.
Aceste imagini de fond mari sunt ușor de creat utilizând următoarele trei proprietăți de stil CSS :
- imagine de fundal
- fundal repetare
- background-attachment
- background-size
Imagine de fundal
Veți utiliza imaginea de fundal pentru a defini imaginea care va fi utilizată ca filigran. Acest stil utilizează pur și simplu o cale de fișier pentru a încărca o imagine pe care o aveți pe site-ul dvs., probabil într-un director numit "imagini".
fundal-imagine: url (/images/page-background.jpg);
Este important ca imaginea în sine să fie mai deschisă sau mai transparentă decât o imagine obișnuită. Acest lucru va crea acel aspect "filigran" în care se află o imagine semi-transparentă în spatele textului, graficii și a altor elemente principale ale paginii web. Fără acest pas, imaginea de fundal va concura cu informațiile de pe pagina dvs. și va face dificilă citirea.
Puteți ajusta imaginea de fundal în orice program de editare, cum ar fi Adobe Photoshop.
Context-Repeat
Proprietatea repetată în fundal vine în continuare. Dacă doriți ca imaginea dvs. să fie o imagine mare în stilul filigranului, ați folosi această proprietate pentru a face ca imaginea să fie afișată o singură dată.
background-repeat: nu-repeta;
Fără proprietatea "nu se repetă", implicit este că imaginea se va repeta mereu și repetat pe pagină. Acest lucru este nedorit în majoritatea modelelor de pagini web moderne, deci acest stil ar trebui considerat esențial în CSS.
Background-Attachment
Background-attachment este o proprietate pe care mulți designeri web o uită. Utilizarea acestuia vă menține imaginea de fundal fixată la locul său atunci când utilizați proprietatea "fix". Este ceea ce transformă imaginea într-un filigran care este fixat pe pagină.
Valoarea implicită pentru această proprietate este "defilați". Dacă nu specificați o valoare de atașament de fundal, fundalul va fi derulat împreună cu restul paginii.
atașament de fundal: fix;
Context-size
Dimensiunea fundalului este o proprietate CSS mai nouă. Acesta vă permite să setați dimensiunea unui fundal bazat pe portul de vizualizare la care este vizionat. Acest lucru este foarte util pentru site-urile web responsabile care se vor afișa la diferite dimensiuni pe diferite dispozitive .
dimensiunea fundalului: capac;
Două valori utile pe care le puteți utiliza pentru această proprietate includ:
- Cover - Cântărește fundalul astfel încât să fie afișată fie lățimea completă, fie înălțimea completă. Aceasta înseamnă că anumite părți ale imaginii ar putea să nu apară pe ecran, dar că întreaga zonă va fi acoperită.
- Conține - Mărește imaginea, astfel încât atât întreaga lățime cât și înălțimea să fie afișate în zona în care se face stilul. Imaginea nu este tăiată, dar dezavantajul este că anumite părți ale zonei nu pot fi acoperite de imagine.
Adăugarea CSS în pagina dvs.
După ce înțelegeți proprietățile de mai sus și valorile acestora, puteți adăuga aceste stiluri pe site-ul dvs. Web.
Adăugați următoarele la HEAD-ul paginii dvs. web dacă realizați un site cu o singură pagină. Adăugați-o la stilurile CSS ale unei foi de stil externe dacă construiți un site cu mai multe pagini și doriți să profitați de puterea unei foi externe.