Url de fundal css cum să introduceți întreaga imagine. Fundal CSS
Și aici ajungem la principalul lucru, să parafrazăm asta: „Site-ul începe cu fundalul”. Majoritatea bloggerilor fac „bloguri clasice” cu un fundal alb, dar vom merge pe un alt drum. Treceți pe lângă o proprietate minunată Imagine de fundal CSS, nu putem.
Ce face? Această proprietate Imagine de fundal CSS inserează o imagine ca fundal în diferite elemente HTML-pagini. Nu se limitează doar la etichetă corpși este utilizat pe scară largă în designul site-urilor web, de exemplu pentru: div, li, p, tabel, antet, subsol.
Să ne uităm la un exemplu:
Designul site-ului începe cu fundalul.
Ar fi corect să specificați o culoare pentru fundal – proprietate culoare de fundal, ca plasă de siguranță dacă imaginea nu se încarcă. Între paranteze url() indicați calea către folderul cu imagini.
În mod implicit, imaginea se va repeta ca o „tigla” până umple întregul ecran al browserului, pe măsură ce ne deplasăm în jos pe pagină, „tigla” noastră va umple atât al doilea ecran, cât și al treilea, doar până când conținutul paginii se epuizează; . Este clar că un astfel de rezultat nu este culmea gândirii de design și nu vom avea o „baie”, ci doar un blog, în care lizibilitatea este un punct foarte important.
O opțiune simplă pentru a scăpa de „tiledness” este să folosiți o imagine mare, de cel puțin 1024 px lățime, astfel încât să umple întregul ecran. De asemenea, ar fi o soluție bună pentru a găsi o textură fără sudură, atunci când este înmulțit, modelul va arăta ca un întreg.
Cum să faci fundalul mai atractiv?
Slavă Domnului că avem ajutoare pentru asta:
- fără repetare– dezactivați repetarea
- repeta-x– repetarea modelului numai pe orizontală
- repeta-y– repetarea modelului doar pe verticală
De exemplu:
Antetul blogului
Aceasta este o textură de fundal care se repetă doar pe orizontală.
Următorul ajutor - proprietate 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 poză, 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 este situată în partea dreaptă.
Indentarea din marginea dreaptă este setată la 200 px pentru a evita ciocnirea textului cu fundalul.
Dacă dorim ca imaginea să fie întotdeauna vizibilă atunci când ecranul derulează în jos, trebuie să adăugăm o proprietate la codul de mai sus - fundal-atașare: fix;
Care este diferența dintre imgŞi imagine de fundal?
Diferența este fundamentală, tag img introdus direct în corp HTML-pagină și este responsabil pentru conținut (ilustrări, fotografii, avatare), poartă o încărcare semantică. Este foarte important ca imaginea să fie indexată de motoarele de căutare și inclusă în rezultatele căutării. Proprietăți Imagine de fundal CSS– faceți site-ul unic și frumos, adică acesta este un design care ar trebui să fie transferat într-un fișier extern CSS stiluri sau utilizarea în interiorul unui element stil.
Desigur, asta nu înseamnă asta imagine de fundal nu va funcționa dacă este plasat în corp HTML-pagini. Dar recomand cu tărie să se ia în considerare tot ce ține de design CSS. Drept urmare, vom obține o curățare HTML-cod:
- acest lucru va avea un efect pozitiv asupra indexării site-ului, roboții de căutare vă vor iubi site-ul ș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.
- Este mai ușor pentru tine, ca webmaster, să lucrezi cu cod curat.
Ei bine, am luat în considerare mai mult sau mai puțin toate opțiunile folosind proprietatea Imagine de fundal CSS. Mai multă practică prieteni! Simțiți-vă liber să copiați codul și să veniți cu propriile variații!
Informații scurte
versiuni CSS
Valori
url Valoarea este calea către fișierul grafic, care este specificată în construcția url(). Calea către fișier poate fi scrisă fie între ghilimele (duble sau simple), fie fără ele.none Dezactivează imaginea de fundal pentru element.
HTML5 CSS2.1 IE Cr Op Sa Fx
imagine de fundal
Model obiect
document.getElementById("elementID").style.backgroundImage
Browsere
Versiunile de Internet Explorer până la 7.0 inclusiv aplică un fundal la chenarul interior al unui element care are setată proprietatea hasLayout. Dacă elementul nu are un hasLayout , proprietatea background-image va respecta marginile elementului, așa cum este specificat în specificație. Diferența de afișare va fi vizibilă dacă marginile sunt punctate sau punctate mai degrabă decât solide.
Dacă elementul este setat la derulare sau automat , Internet Explorer 8 va avea o întârziere verticală de un pixel atunci când fundalul derulează.
none Dezactivează imaginea de fundal pentru element.
| 1 | 2 | 3 |
Rezultatul acestui exemplu în browserul Chrome este prezentat în Fig. 1. Browserele Internet Explorer, Opera și Firefox afișează corect fundalul liniei (Fig. 2).
Orez. 1. Repetați fundalul pentru fiecare celulă
Orez. 2. Fundal pentru întreaga linie
imagine de fundal:
Descriere
proprietatea imaginii de fundal(din engleză „imagine de fundal” ‒ „imagine de fundal”) setează imaginea de fundal a elementului.
Nota
Când setați o imagine de fundal, ar trebui să specificați și o culoare de fundal care va fi folosită dacă imaginea nu este disponibilă. Dacă o imagine este disponibilă, aceasta este afișată peste culoarea de fundal. (Astfel culoarea va fi vizibilă în părțile transparente ale imaginii).
Termeni de utilizare
Deoarece CSS3 (separat prin virgulă), puteți specifica mai multe imagini de fundal simultan. Acest lucru va face imaginile de fundal de jos vizibile prin zonele transparente ale imaginilor de fundal de sus.
JavaScript
[obiect].style.backgroundImage="[valoare]";
Suport pentru browser
Caietul de sarcini
Valori
Toate valorile CSS 1 CSS 2.0 CSS 2.1 CSS 2.2 CSS 3
Niciunul Indică faptul că nu există o imagine de fundal.
) Specifică șirul URI al imaginii în interiorul „url(...)”.
imagine de fundal: url(myImage.png);
") Specifică șirul URI al imaginii în interiorul " url(...) ". Șirul URI este separat prin caractere " " " CLIME DUBLE.
imagine de fundal: url("Imaginea mea.png");
Moștenire Specifică faptul că elementul ar trebui să moștenească setările elementului părinte. Valoarea inițială:
"nici unul".
Exemplu de utilizare
proprietatea imaginii de fundal
Imagine de fundal
HTML5 CSS2.1 IE Cr Op Sa Fx
imagine de fundal
Model obiect
document.getElementById("elementID").style.backgroundImage
Browsere
Versiunile de Internet Explorer până la 7.0 inclusiv aplică un fundal la chenarul interior al unui element care are setată proprietatea hasLayout. Dacă elementul nu are un hasLayout , proprietatea background-image va respecta marginile elementului, așa cum este specificat în specificație. Diferența de afișare va fi vizibilă dacă marginile sunt punctate sau punctate mai degrabă decât solide.
Dacă elementul este setat la derulare sau automat , Internet Explorer 8 va avea o întârziere verticală de un pixel atunci când fundalul derulează.
none Dezactivează imaginea de fundal pentru element.
| 1 | 2 | 3 |
Rezultatul acestui exemplu în browserul Chrome este prezentat în Fig. 1. Browserele Internet Explorer, Opera și Firefox afișează corect fundalul liniei (Fig. 2).
Orez. 1. Repetați fundalul pentru fiecare celulă
Orez. 2. Fundal pentru întreaga linie
Citeste si...
Adaptoare MHL, conectarea unui smartphone la o mașină Chromecast: streaming simplu, dar costisitor
