Ghid complet. CSS. Full Manual Care este diferența dintre IMG și imaginea de fundal
Și aici am ajuns la principala parafrazare: "Site-ul începe cu fundalul". Majoritatea bloggerilor fac "bloguri clasice" cu un fundal alb, dar vom merge diferit. Treceți proprietățile minunate CSS fundal-imagine, nu putem.
Ce face? Această proprietate CSS fundal-imagine introduce o imagine ca fundal în diferite elemente HTML.- pagini. Nu se limitează la etichetă corp., și este utilizat pe scară largă în designul site-ului, de exemplu pentru: div, Li, P, masă, antet, subsol.
Luați în considerare un exemplu:
Designul site-ului începe cu fundalul.
Va fi corect să înregistrați culoarea în fundal - proprietate culoare de fundal., pentru amortizarea, dacă imaginea nu pornește. În paranteze uRL () Specificați calea către dosar cu imaginile.
În mod implicit, imaginea va fi repetată ca "țiglă" până când umple întregul ecran al browserului, deoarece pagina se deplasează în jos, "țiglă" va umple și al doilea ecran și al treilea, exact atât de mult până la conținutul de Pagina este finalizată. Este clar că un astfel de rezultat nu este vârful gândirii designerului și nu vom avea o "baie", ci doar un blog în care lizibilitatea este un punct foarte important.
O opțiune simplă de a scăpa de "telia" este de a folosi o imagine cu dimensiuni mari, de cel puțin 1024 px lățime, astfel încât să se umple în sine întregul ecran. Prea va fi buna decizie Găsiți o textura fără sudură, cu o reproducere a cărei, desenul va fi ca unul.
Cum de a face fundalul mai atractiv?
Mulțumesc lui Dumnezeu că avem asistenți pentru acest lucru:
- no-repetat. - să interzică repetarea
- repetat-x. - repetarea desenului numai pe orizontală
- repetați-y. - repetarea desenului doar vertical
De exemplu:
Blog Cap.
Aceasta este o textura de fundal cu o repetare numai pe orizontală
Următorul asistent - proprietate poziția de fundalVă permite să poziționați imaginea de fundal oriunde pe ecran. Această tehnică este larg răspândită în designul Web modern. Avem o imagine, dar nu face parte din conținut, ci servește ca decor de site.
Titlu
Un exemplu de fundal neoficial cu o poziționare dată.
Imaginea este afișată o singură dată și este localizată în partea dreaptă.
Indentarea de la marginea din dreapta a 200 px este stabilită pentru a evita textul textului pe fundal.
Dacă vrem ca imaginea să fie întotdeauna vizibilă atunci când derulați ecranul în jos, trebuie să adăugați proprietatea la codul de mai sus - fundal-atașare: fix;
Care este diferenta dintre img. și imagine de fundal?
Diferența principal, etichetă img. introduse direct în organism HTML.- Asistentul și este responsabil pentru conținutul (ilustrații, fotografii, avatare), poartă o sarcină semantică. Este foarte important ca imaginea să fie indexată. motoare de căutare Și a intrat în emiterea de căutare. Proprietăți CSS fundal-imagine - Faceți un site unic și frumos, adică acest design, care trebuie administrat în fișierul extern Css. stiluri sau utilizare în interiorul elementului stil..
Desigur, acest lucru nu înseamnă asta imagine de fundal. nu va funcționa dacă o puneți în organism HTML.- pagini. Dar recomand foarte mult tot ceea ce privește designul pentru a îndura în Css.. Ca rezultat, suntem curați HTML.-Codul:
- acesta va afecta indexarea site-ului, boturile de căutare vă vor iubi site-ul și vor veni mai des.
- vizitatorii dvs. vor fi, de asemenea, mulțumiți, site-ul va fi încărcat mai repede datorită greutății mici.
- vă place un maestru web este mai ușor de a lucra cu un cod curat.
Ei bine, am revizuit mai mult sau mai puțin toate opțiunile folosind proprietatea. CSS fundal-imagine. Mai mulți prieteni de practică! Copiați cu îndrăzneală codul și inventați-vă opțiunile!
informatie scurta
Versiuni CSS.
Valori
Adresa URL ca o cale de valoare folosită la fișier grafic.care este specificat în interiorul designului URL (). Calea către fișier poate fi scrisă atât în \u200b\u200bcitate (duble sau singure), și fără ele. Nimeni nu anulează imaginea de fundal pentru element. Moștenirea moștenește valoarea părintească.HTML5 CSS2.1 IE CR OP SA FX
Modelul obiectului
document.getelementbyid ("elementid") .Style.ground:
Browsere
Internet Explorer. Înainte de versiunea 7.0, se transformă fundalul părții interioare a limitei elementului, care are proprietatea Haslayout. Dacă elementul nu are haslayout, proprietatea imaginii de fundal va lua în considerare limitele elementului, așa cum este specificat în specificație. Diferența în cartografie va fi vizibilă dacă frontierele punctate (splate sau punctate) și nu sunt solide.
Dacă valoarea este setată ca defilare sau auto pentru un element, în Internet Explorer 8 va exista o întârziere verticală într-un pixel atunci când derulați fundalul.
Internet Explorer înainte de versiunea 7.0 nu acceptă valoarea moștenirii.
Dacă fundalul este setat pentru rândul de masă (etichetă
HTML5 CSS2.1 IE CR OP SA FX
| 1 | 2 | 3 |
Rezultat acest exemplu În browserul Chrome este prezentat în fig. unu. Motor de cautare Explorer, Opera și Firefox afișează corect fundalul pentru șir (figura 2).
Smochin. 1. Repetarea fundalului pentru fiecare celulă
Smochin. 2. Contextul întregului rând
informatie scurta
Versiuni CSS.
Valori
URL, calea către fișierul grafic este utilizată ca valoare, care este specificată în interiorul designului URL (). Calea către fișier poate fi scrisă atât în \u200b\u200bcitate (duble sau singure), și fără ele. Nimeni nu anulează imaginea de fundal pentru element. Moștenirea moștenește valoarea părintească.HTML5 CSS2.1 IE CR OP SA FX
Modelul obiectului
document.getelementbyid ("elementid") .Style.ground:
Browsere
Internet Explorer la versiunea 7.0 inclusiv se aplică fundalul părții interioare a limitei elementului, care are proprietatea Haslayout. Dacă elementul nu are haslayout, proprietatea imaginii de fundal va lua în considerare limitele elementului, așa cum este specificat în specificație. Diferența în cartografie va fi vizibilă dacă frontierele punctate (splate sau punctate) și nu sunt solide.
Dacă valoarea este setată ca defilare sau auto pentru un element, în Internet Explorer 8 va exista o întârziere verticală într-un pixel atunci când derulați fundalul.
Internet Explorer înainte de versiunea 7.0 nu acceptă valoarea moștenirii.
Dacă fundalul este setat pentru rândul de masă (etichetă
HTML5 CSS2.1 IE CR OP SA FX
| 1 | 2 | 3 |
Rezultatul acestui exemplu în browserul Chrome este prezentat în fig. 1. Internet Explorer, Opera și Firefox Browser afișează corect fundalul pentru șir (figura 2).
Smochin. 1. Repetarea fundalului pentru fiecare celulă
Smochin. 2. Contextul întregului rând
imagine de fundal:
Descriere
Imagine de fundal (din engleză. "Imagine de fundal" - "Imagine de fundal") setează imaginea de fundal a elementului.
Notă
Când instalați imaginea de fundal, trebuie să specificați, de asemenea, culoarea de fundal care urmează să fie utilizată în cazul în care imaginea nu este disponibilă. În cazul în care imaginea este disponibilă, este afișată pe partea superioară a culorii de fundal. (Astfel, culoarea va fi vizibilă în părțile transparente ale imaginii).
Termeni de utilizare
Începând cu CSS3 (prin virgulă), puteți specifica mai multe imagini de fundal simultan. În același timp, imaginile de fundal de fund vor fi vizibile prin zone transparente ale imaginilor de fundal superior.
JavaScript.
[Obiect] .Style .backgroundimage \u003d "[valoare]";
Sprijiniți browserele
Specificație
Valori
Toate valorile CSS 1 CSS 2.0 CSS 2.1 CSS 2.2 CSS 3
Nimeni nu indică lipsa imaginii de fundal. URL (
imaginea de fundal: URL (MyImage.png);
URL ("
imaginea de fundal: URL ("myimage.png");
Moștenirea indică faptul că elementul trebuie să moștenească parametrii elementului părinte.
Semnificația inițială: "Nici unul."
Exemplu de utilizare
Codul de listare
Imagine de fundal
Document cu imagini multiple de fundal.