imagine de fundal:
Descriere
Proprietatea de imagine de fundal(din engleza "background image" - "background image") setează imaginea de fundal a unui element.
Notă
Când setați o imagine de fundal, ar trebui să specificați și culoarea de fundal care va fi utilizată dacă imaginea nu este disponibilă. Când o imagine este disponibilă, aceasta este afișată peste culoarea de fundal. (În acest fel, culoarea va fi vizibilă în părțile transparente ale imaginii).
Termeni de utilizare
Începând cu CSS3 (separate prin virgule), puteți specifica mai multe imagini de fundal simultan. Acest lucru va face imaginile de fundal inferioare vizibile prin zonele transparente ale imaginilor de fundal superioare.
JavaScript
[object] .style .backgroundImage = "[valoare]";
Suport pentru browser
Specificație
Valorile
Toate valorile CSS 1 CSS 2.0 CSS 2.1 CSS 2.2 CSS 3
None Nu indică nicio imagine de fundal. url (
imagine de fundal: url (myImage.png);
URL („
imagine de fundal: url ("myImage.png");
Moștenire Indică faptul că elementul ar trebui să moștenească parametrii elementului părinte.
Valoarea initiala:"Nici unul".
Exemplu de utilizare
Listarea codurilor
Imagine de fundal
Un document cu mai multe imagini de fundal.
Proiectarea site-urilor web începe cu un fundal.
Va fi corect să se prescrie culoarea de fundal - proprietate culoare de fundal, pentru plasă de siguranță, dacă imaginea nu se încarcă. În paranteze url () specificați calea către folderul cu imagini.
În mod implicit, imaginea se va repeta ca o „țiglă” până când umple întregul ecran al browserului, pe măsură ce ne deplasăm în jos, „țiglă” noastră va umple atât al doilea ecran, cât și al treilea, atât timp cât conținutul paginii se termină . Este clar că un astfel de rezultat nu este înălțimea unei idei de design și nu vom avea o „baie”, ci doar un blog, unde lizibilitatea este un punct foarte important.
O opțiune simplă pentru a scăpa de „faianță” este utilizarea unei imagini mari, de cel puțin 1024 px lățime, astfel încât să umple întregul ecran. De asemenea, va fi o soluție bună pentru a găsi o textură fără sudură, atunci când este multiplicată, imaginea va fi ca un întreg.
Cum să faci fundalul mai atractiv?
Slavă Domnului că avem ajutoare pentru asta:
- fără repetare- dezactivați repetarea
- repetați-x- repetarea tiparului doar pe orizontală
- repeta-y- repetarea tiparului doar pe verticală
De exemplu:
Antetul blogului
Aceasta este o textură de fundal care se repetă numai pe orizontală.
Următorul ajutor este proprietatea fundal-poziție, vă permite să poziționați imaginea de fundal oriunde pe ecran. Această tehnică este răspândită în designul web modern. Avem o imagine, dar nu face parte din conținut, ci servește doar ca decor pentru site.
Titlu
Un exemplu de fundal care nu se repetă cu o poziționare dată.
Imaginea este afișată o singură dată și se află în dreapta.
Indentarea de la marginea dreaptă este setată la 200 px pentru a evita suprapunerea textului cu fundalul.
Dacă dorim ca imaginea să fie întotdeauna vizibilă atunci când derulați ecranul, trebuie să adăugăm proprietatea la codul de mai sus - background-attachment: fix;
Care este diferenta dintre imgși imagine de fundal?
Diferența este fundamentală, tag img inserat direct în corp HTML-pagini și este responsabil pentru conținut (ilustrații, fotografii, avatare), are o sarcină semantică. Este foarte important ca imaginea să fie indexată de motoarele de căutare și să intre în rezultatele căutării. Proprietăți Imagine de fundal CSS- faceți site-ul unic și frumos, adică acest design, care ar trebui scos într-un fișier extern CSS stiluri sau utilizați în interiorul unui element stil.
Desigur, asta nu înseamnă asta imagine de fundal nu va funcționa dacă este pus în corp HTML-pagini. Dar recomand cu tărie ca tot ce ține de design să fie eliminat CSS... Ca urmare, vom obține o curățenie HTML-cod:
- acest lucru va avea un efect pozitiv asupra indexării site-ului, roboții de căutare vor iubi site-ul dvs. și îl vor vizita mai des.
- vizitatorii dvs. vor fi, de asemenea, mulțumiți, site-ul se va încărca mai repede datorită greutății sale reduse.
- dvs., ca webmaster, vă este mai ușor să lucrați cu un cod curat.
Ei bine, am luat în considerare mai mult sau mai puțin toate opțiunile care utilizează proprietatea Imagine de fundal CSS... Mai mulți prieteni practicați! Simțiți-vă liber să copiați codul și să veniți cu propriile opțiuni!
informații scurte
Versiuni CSS
Valorile
url Valoarea este calea către fișierul grafic, care este specificată în interiorul construcției url (). În acest caz, calea către fișier poate fi scrisă fie între ghilimele (duble sau simple), fie fără ele. none Anulează imaginea de fundal pentru element. mosteneste Moștenește valoarea de la părinte.HTML5 CSS2.1 IE Cr Op Sa Fx
Model de obiect
document.getElementById ("elementID") .style.backgroundImage
Browsere
Internet Explorer 7.0 sau o versiune ulterioară aplică un fundal în interiorul chenarului unui element care are proprietatea sa setată. Dacă un element nu are hasLayout, proprietatea de imagine de fundal va respecta marginile elementului așa cum se specifică în spec. Diferența de afișare se va observa dacă marginile sunt întrerupte sau punctate, mai degrabă decât solide.
Dacă elementul este setat să se deruleze sau să fie automat, Internet Explorer 8 va avea o întârziere verticală de un pixel atunci când fundalul se derulează.
Internet Explorer până la versiunea 7.0 inclusă nu acceptă valoarea de moștenire.
Dacă fundalul este setat pentru un rând de tabel (tag
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
Rezultatul acestui exemplu în browserul Chrome este prezentat în Fig. 1. Browser Internet Explorer, Opera și Firefox afișează corect fundalul liniei (Fig. 2).
Orez. 1. Repetarea fundalului pentru fiecare celulă
Orez. 2. Fundal pentru întreaga linie
informații scurte
Versiuni CSS
Valorile
url Valoarea este calea către fișierul grafic, care este specificată în interiorul construcției url (). În acest caz, calea către fișier poate fi scrisă fie între ghilimele (duble sau simple), fie fără ele. none Anulează imaginea de fundal pentru element. mosteneste Moștenește valoarea de la părinte.HTML5 CSS2.1 IE Cr Op Sa Fx
Model de obiect
document.getElementById ("elementID") .style.backgroundImage
Browsere
Internet Explorer 7.0 sau o versiune ulterioară aplică un fundal în interiorul chenarului unui element care are proprietatea sa setată. Dacă un element nu are hasLayout, proprietatea de imagine de fundal va respecta marginile elementului așa cum se specifică în spec. Diferența de afișare se va observa dacă marginile sunt întrerupte sau punctate, mai degrabă decât solide.
Dacă elementul este setat să se deruleze sau să fie automat, Internet Explorer 8 va avea o întârziere verticală de un pixel atunci când fundalul se derulează.
Internet Explorer până la versiunea 7.0 inclusă nu acceptă valoarea de moștenire.
Dacă fundalul este setat pentru un rând de tabel (tag
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
Rezultatul acestui exemplu în browserul Chrome este prezentat în Fig. 1. Browser Internet Explorer, Opera și Firefox afișează corect fundalul liniei (Fig. 2).
Orez. 1. Repetarea fundalului pentru fiecare celulă
Orez. 2. Fundal pentru întreaga linie
Cred că nu există un singur site în care proprietatea să nu fie folosită Fundal CSS... S-ar părea, ce ar putea fi mai simplu decât această proprietate? Dar nu, capacitățile sale sunt mult mai largi decât scopul obișnuit al unei imagini sau culori ca fundalul unei pagini. Ceva va fi familiar, dar ceva va deveni cu siguranță o noutate pentru mulți. În orice caz, va fi util să știți bine cum funcționează fundalul.
CSS3 a adus o mulțime de lucruri noi proprietății, aceasta este transparența și atribuirea mai multor imagini ca fundal, dar despre asta vom vorbi mai jos și, mai întâi, vom analiza elementele de bază ale proprietății. fundal.
culoare de fundal
Sunt destul de sigur că ați făcut sarcini de culoare de fundal de mai multe ori. Acest lucru se poate face folosind mai multe tipuri de notație: obișnuită (se folosește numele culorii), notație hexazecimală sau RGB. Fiecare tip este egal, utilizați ceea ce vă place cel mai mult. Încerc să folosesc cea mai scurtă versiune, iar pentru percepție este mai simplă, iar fișierul de stil este puțin mai mic ca dimensiune.
P (background-color: red;) p (background-color: # f00;) p (background-color: # ff0000;) p (background-color: rgb (255, 0, 0;))
CSS3 are suport pentru transparență, deci îl puteți adăuga și la culoarea noastră, astfel:
P (culoare de fundal: rgba (255, 0, 0, 0,5);)
Ultima cifră a fost setată la 50% transparență. Puteți seta valoarea transparenței de la 0 (fundal complet transparent) la 1 (complet opac).
imagine de fundal
Această proprietate este, de asemenea, utilizată foarte des, vă permite să atribuiți o imagine fundalului. CSS3 adaugă posibilitatea de a atribui mai multe imagini fundalului, fiecare creând un fel de strat, astfel încât fiecare ulterior este suprapus pe cel anterior. De ce ar putea fi util acest lucru? Totul este destul de simplu - să presupunem că trebuie să înșurubați butoanele mici din fiecare colț al site-ului. Oferirea unui aspect mai mult sau mai puțin fluid, utilizarea unei imagini nu este o opțiune. Prin urmare, realizăm 4 „straturi”, mutăm fiecare imagine în propriul colț și gata, problema este rezolvată
Corp (imagine de fundal: url („imagine1”), url („imagine2”), url („imagine3”))
Dacă trebuie să atribuiți o imagine fundalului, lăsăm doar prima din cod, cred că acest lucru este de înțeles.
Există două reguli de reținut atunci când utilizați orice imagine ca fundal:
- setați o culoare de fundal contrastantă în cazul în care utilizatorul nu poate afișa o imagine dintr-un motiv oarecare. Poate opri afișarea imaginilor curioase, economisește trafic.
- nu utilizați o imagine de fundal pentru a transmite informații importante. Din motivul menționat mai sus, este posibil ca utilizatorul să nu-l vadă.
Suportul pentru mai multe imagini de fundal este suficient de larg. Toate browserele, chiar și IE8, acceptă această proprietate.
