De la autor: Le urez bun venit tuturor. Culorile de fundal și imaginile joacă un rol imens în designul web, deoarece permit ca orice element să fie proiectat mai atractiv. Astăzi vom analiza cum să creăm un fundal în html.
Este posibil să treceți cu html atunci când setați fundalul?
Îți spun imediat că nu. În general, html nu este conceput pentru a stiliza paginile web. Este foarte incomod. De exemplu, există un atribut bgcolor cu care puteți seta culoarea de fundal, dar acest lucru este foarte incomod.
În consecință, vom folosi foi de stil în cascadă (css). Există mult mai multe oportunități pentru stabilirea fundalului. Vom analiza cele mai elementare astăzi.
Cum pot seta fundalul prin css?
Deci, mai întâi de toate, trebuie să decideți ce element trebuie să setați fundalul. Adică, trebuie să găsim selectorul în care vom scrie regula. De exemplu, dacă fundalul trebuie setat pentru întreaga pagină în ansamblu, atunci puteți face acest lucru prin selectorul de corp, pentru toate blocurile - prin selectorul div. Ei bine, etc. Fundalul poate și trebuie să fie legat de orice alt selector: clase de stil, identificatori etc.
După ce ați decis selectorul, trebuie să scrieți numele proprietății în sine. Pentru a seta culoarea de fundal (doar o culoare solidă, nu un gradient sau o imagine), utilizați proprietatea de culoare de fundal. După el, trebuie să puneți două puncte și să scrieți culoarea în sine. Acest lucru se poate face în diferite moduri. De exemplu, folosind formate de cuvinte cheie, cod hex, rgb, rgba, hsl. Orice metodă va funcționa.
Cea mai frecvent utilizată metodă este codul hexazecimal. Pentru potrivirea culorilor, puteți utiliza un program care afișează codul de culoare. De exemplu photoshop, vopsea sau un instrument online. În consecință, de exemplu, voi scrie un fundal general pentru întreaga pagină web.
corp (fundal-culoare: # D4E6B3;)
Acest cod trebuie inserat în secțiunea cap. Este important ca fișierele să fie în același folder.
Imagine ca fundal
Voi folosi o pictogramă de limbă html mică ca imagine:
Să creăm un bloc gol cu \u200b\u200bun identificator:
< div id = "bg" > < / div > |
Să îi oferim dimensiuni și fundal explicit:
#bg (lățime: 400px; înălțime: 250px; imagine de fundal: url (html.png);)
#bg ( lățime: 400px; înălțime: 250px; fundal - imagine: url (html. png); |
Din acest cod, puteți vedea că am folosit o nouă proprietate - background-image. Este conceput doar pentru a insera o imagine ca fundal pentru un element html. Să vedem ce s-a întâmplat:
Pentru a seta o imagine, trebuie să scrieți cuvântul cheie URL după două puncte, apoi să specificați calea fișierului între paranteze. În acest caz, calea este specificată pe baza faptului că imaginea se află în același folder cu documentul html. De asemenea, trebuie să specificați formatul imaginii.
Dacă ați făcut acest lucru, iar fundalul încă nu apare în bloc, verificați din nou dacă ați scris corect numele imaginii, dacă calea și extensia au fost specificate corect. Acestea sunt cele mai frecvente motive pentru care fundalul pur și simplu nu este afișat, deoarece browserul nu poate găsi imaginea.
Dar ai observat o particularitate? Browserul a luat și a reprodus imaginea în întregul bloc. Deci, pentru a ști, acesta este comportamentul implicit al imaginilor de fundal - acestea se repetă pe verticală și orizontală până când se pot încadra în bloc. Puteți controla cu ușurință acest comportament. Pentru a face acest lucru, utilizați proprietatea background-repeat, care are 4 valori principale:
Repetare - valoare implicită, imaginea se repetă pe ambele părți;
Repeat-x - se repetă numai pentru ois x;
Repeat-y - se repetă numai de-a lungul axei y;
No-repeat - nu repetă deloc;
Puteți scrie fiecare valoare și puteți vedea ce se întâmplă. Îl voi scrie așa:
fundal-repetare: repetare-x;
fundal - repetați: repetați - x; |
Acum repetați doar pe orizontală. Dacă nu se repetă, ar exista o singură imagine.
Excelent, puteți finaliza deja acest lucru, deoarece acestea sunt posibilități de bază pentru lucrul cu fundalul, dar vă voi arăta încă 2 proprietăți care vă permit să obțineți mai mult control asupra acestuia.
Cu repetarea, proiectanții de layout obișnuiau să obțină texturi de fundal și gradiente folosind o singură imagine mică. Ar putea avea 30 de pixeli cu 10 pixeli sau mai puțin. Poate ceva mai mult. Imaginea a fost de așa natură încât, atunci când a fost repetată pe una sau chiar pe ambele părți, nu au fost vizibile tranziții, astfel încât, ca rezultat, s-a obținut un singur fundal solid. Apropo, această abordare merită folosită acum dacă doriți să utilizați o textură perfectă pe site-ul dvs. ca fundal. Astăzi, gradientul poate fi deja implementat folosind metode CSS3, cu siguranță vom vorbi despre acest lucru.
Poziția de fundal
În mod implicit, o imagine de fundal, dacă nu este setată să se repete, va fi în colțul din stânga sus al blocului său. Dar poziția poate fi ușor schimbată folosind proprietatea de fundal-poziție.
O poți întreba în moduri diferite. Una dintre opțiuni este să indicați pur și simplu laturile în care ar trebui să fie amplasată imaginea:
fundal-poziție: dreapta sus;
fundal - poziție: dreapta sus; |
Adică, pe verticală, totul a rămas același: imaginea de fundal este situată deasupra, dar orizontal, am schimbat partea în dreapta, adică dreapta. O altă modalitate de a seta poziția este procentual. În acest caz, numărătoarea inversă începe în orice caz din colțul din stânga sus. 100% - întregul bloc. Astfel, pentru a plasa imaginea exact în centru, scriem astfel:
poziția de fundal: 50% 50%;
fundal - poziție: 50% 50%; |
Amintiți-vă un lucru important legat de poziționare - primul parametru este întotdeauna poziția orizontală, iar al doilea este poziția verticală. Deci, dacă vedeți o valoare de 80% 20%, puteți concluziona imediat că imaginea de fundal va fi puternic deplasată spre dreapta, dar nu va coborî mult.
În cele din urmă, puteți scrie poziția în pixeli. Totul este la fel, dar în loc de% vor fi px. În unele cazuri, această poziționare poate fi, de asemenea, necesară.
Notare prescurtată
Sunt de acord că codul se dovedește a fi destul de greoi dacă totul este stabilit așa cum am făcut-o. Se pare că calea către imagine trebuie setată, iar repetarea și poziția. Desigur, repetarea și poziția nu sunt întotdeauna necesare, dar în orice caz, este mai corect să folosiți proprietatea de stenogramă. Se pare că:
fundal: # 333 url (bg.jpg) fără repetare 50% 50%;
fundal: # 333 url (bg.jpg) fără repetare 50% 50%; |
Adică, primul pas este să înregistrați culoarea de fundal solidă, dacă este necesar. Apoi calea către imagine, repetare și poziție. Dacă un anumit parametru nu este necesar, atunci îl omitem. De acord, acest lucru este mult mai rapid și mai convenabil și, de asemenea, ne reducem semnificativ codul. În general, vă sfătuiesc să scrieți întotdeauna în abrevieri, chiar dacă trebuie doar să indicați o culoare sau o imagine.
Controlarea dimensiunii imaginii de fundal
Imaginea noastră actuală nu este potrivită pentru următorul truc, așa că voi lua o alta. În dimensiune, să fie ca un bloc sau mai mare decât acesta. Deci, imaginați-vă că vă confruntați cu o sarcină: să creați o imagine de fundal, astfel încât să nu-și umple complet blocul. Și imaginea, de exemplu, este chiar mai mare decât dimensiunea blocului.
Ce poți face în acest caz? Desigur, cea mai simplă și rezonabilă opțiune ar fi simpla reducere a imaginii, dar nu este întotdeauna posibil să se facă acest lucru. Să presupunem că se află pe server și în acest moment nu există timp sau oportunitate pentru a-l reduce. Problema poate fi rezolvată folosind proprietatea de dimensiune a fundalului, care poate fi numită relativ nouă și care vă permite să manipulați dimensiunea imaginii de fundal, sau într-adevăr orice fundal.
Deci, imaginea mea ocupă acum tot spațiul din bloc, dar îi voi oferi o dimensiune de fundal:
dimensiunea fundalului: 80% 50%;
fundal - dimensiune: 80% 50%; |
Din nou, primul parametru este dimensiunea orizontală, al doilea - dimensiunea verticală. Putem vedea că totul a fost aplicat corect - fotografia a devenit 80% din lățimea blocului în lățime și jumătate în înălțime. Aici trebuie doar să faceți o clarificare - setând dimensiunea în procente, puteți afecta proporțiile imaginii. Asa ca ai grija sa nu iesi din proportie.
După cum puteți ghici, dimensiunea fundalului poate fi specificată și în pixeli. Există, de asemenea, două cuvinte cheie cu sens care pot fi, de asemenea, utilizate:
Copertă - imaginea va fi scalată astfel încât cel puțin o parte a acesteia să umple complet blocul.
Conține - scalează-o astfel încât imaginea să se potrivească complet în bloc la dimensiunea sa maximă.
Avantajul acestor valori este că nu modifică raportul de aspect al imaginii, lăsându-le la fel.
De asemenea, trebuie să înțelegeți că întinderea imaginii poate duce la deteriorarea calității acesteia. Pot da un exemplu din viața și practica reală a proiectanților de layout. Toată lumea știe și înțelege că atunci când codificați desktop-uri, trebuie să adaptați site-ul la lățimile principale ale monitoarelor: 1280, 1366, 1920. Dacă faceți o imagine de fundal cu o dimensiune de, să zicem, 1280 x 200 și nu o setați are dimensiunea fundalului, apoi ecranele cu lățimea sunt mai mari, va apărea un spațiu gol, imaginea nu va umple lățimea complet.
În 99% din cazuri, acest lucru nu se potrivește dezvoltatorului web, așa că el setează dimensiunea fundalului: acoperire astfel încât imaginea să se întindă întotdeauna la lățimea maximă a ferestrei. Acesta este un truc bun de utilizat, dar acum vă confruntați cu faptul că utilizatorii cu o lățime a ecranului de 1920 pixeli pot vedea o imagine de calitate sub-optimă.
Permiteți-mi să vă reamintesc că se va întinde la lățimea maximă. În consecință, calitatea se va deteriora automat. Singura soluție corectă aici ar fi utilizarea inițială a unei imagini mai mari - 1920 pixeli lățime. Apoi, pe cele mai largi ecrane, acesta va avea dimensiunea sa naturală, iar pe altele va fi pur și simplu decupat încet, dar în același timp, cu selectarea corectă a imaginii de fundal, acest lucru nu va afecta aspectul site-ului.
În general, acesta este doar un exemplu de utilizare a cunoștințelor pe care le-ați câștigat în acest articol atunci când realizați machete reale.
Fundal semitransparent cu css
Un alt truc care poate fi implementat folosind css este un fundal semitransparent. Adică, prin acest fundal va fi posibil să vedem ce se află în spatele acestuia.
De exemplu, voi seta întreaga pagină ca imagine de fundal pe care am folosit-o mai devreme în exemple. Pentru blocul cu identificatorul bg, pe care efectuăm toate experimentele noastre, vom seta fundalul utilizând formatul de culoare rgba.
După cum am spus mai devreme, există multe formate în CSS pentru setarea culorilor. Unul dintre ele este rgb, un format destul de cunoscut pentru cei care lucrează în editori grafici. Este scris astfel: rgb (17, 255, 34);
Prima valoare dintre paranteze este saturația roșu, apoi verde, apoi albastru. Valoarea poate fi numerică de la 0 la 255. În consecință, formatul rgba nu diferă, se adaugă doar un parametru suplimentar - canalul alfa. Valoarea poate fi de la 0 la 1, unde 0 este transparență completă.
Buna dragi cititori ai site-ului blogului. Astăzi vom analiza cinci reguli CSS care vă permit să setați fundalul pentru orice element din Html - fundal-poziție (imagine, repetare, culoare, atașament). Ei bine, să nu uităm să menționăm și regula compusului de fundal.
Nu este nimic dificil în acest sens, dar există anumite subtilități și nuanțe pe care trebuie să le cunoașteți despre un șablon gata făcut (amintiți-vă că vă va ajuta să deschideți toate aspectele și aspectele oricărui design).
Permiteți-mi să vă reamintesc încă o dată că acest articol face parte dintr-o serie și cel mai bine ar fi să începeți mai întâi să învățați marcarea stilului, și anume cu un articol despre ce este CSS și cu ce se mănâncă, bine, și apoi urmați în ordinea dată în referință. Deși, în orice caz, depinde de dvs., dar acum să vorbim despre stabilirea fundalului.
Culoare, culoare de fundal și imagine de fundal
Să vedem mai întâi cum este setată culoarea elementelor HTML Regulile de culoare CSS... De fapt, totul este simplu aici. Sintaxa este complet normală și puteți seta culoarea în conformitate cu modul în care a fost realizată în limbajul de marcare hipertext. După cum vă amintiți, plasat după semnul hash (hash - "# fe35a3") sau folosind trei cifre, dacă prima se potrivește cu valoarea celei de-a doua, a treia cu a patra, bine, și a cincea, respectiv, cu a șasea (codul de culoare „# aa33ff” poate fi abreviat ca „a3f”).
De asemenea, culorile din codul HTML și CSS pot fi reprezentate ca cuvinte (de exemplu, „roșu”), dar codul hexazecimal este cel mai des folosit:
Culoare: # 303
De exemplu, am colorat acest mic paragraf de aceeași culoare ca mai sus (# 303). Acum este ușor diferită de culoarea tuturor celorlalte paragrafe (mai închisă), care este setată ca # 555 în fișierul CSS al temei WordPress pe care o folosesc. Dar setarea culorii prin culoare este destul de simplă, dar cu fundalul va fi puțin mai dificil.
Asa de, pentru fundal în CSS există cinci reguli care, dacă se dorește, pot fi combinate într-o singură echipă. Pentru a le vedea, puteți accesa pagina specificației curente W3C și puteți căuta ceva cu cuvântul Background:
- culoare de fundal - această regulă stabilește culoarea de fundal pentru orice element HTML. În acesta, puteți utiliza fie codul, fie numele umbrei, adică totul este exact așa cum era atunci când se folosea culoarea.
imagine de fundal - cu ea puteți utiliza o imagine ca fundal (dar asigurați-vă că citiți despre asta, deoarece imaginile grele vor încetini încărcarea paginii), calea către care va fi specificată în funcționalitatea url ().
Dacă te uiți la specificații, vei vedea asta culoare de fundal implicită orice element va fi transparent (valoarea implicită a regulii este „background-color: transparent”). Cu toate acestea, în elemente va fi netransparent în mod implicit, deoarece acestea sunt elemente de sistem și au totul diferit și diferit de etichetele obișnuite ale limbajului de marcare hipertext.
Culoarea culorii de fundal este setată ca standard (șase sau trei cifre ale unui cod hexazecimal sau un cuvânt):
Culoare fundal: #FEFCDE
De exemplu, fundalul acestui paragraf este setat exact prin culoarea de fundal cu codul de culoare dat chiar mai sus.
Toate celelalte patru reguli CSS se referă doar la imaginea de fundal, care poate fi setată pentru orice element Html și, dacă se dorește, poziționată cu precizie. Fișierul grafic care va fi utilizat poate fi setat folosind imagine de fundal.
Dacă vă uitați la specificațiile limbajului de marcare a stilului, veți vedea că imaginea de fundal implicită este „none” (adică nu se folosește nicio imagine de fundal). Ei bine, dacă mai aveți nevoie, atunci în funcția url () va trebui să specificați calea către aceasta:
Imagine de fundal: url (https: //site/image/comment_top_focus.gif);
De exemplu, pentru acest paragraf am folosit un fișier grafic cu fundal, a cărui cale este descrisă chiar mai sus. Puteți vedea că întreaga zonă alocată acestui paragraf este acoperită cu o imagine repetată, care în original arată astfel:
Acestea. atunci când utilizați o singură regulă de imagine de fundal cu calea către fișierul grafic, chiar această imagine va fi multiplicată atât pe verticală cât și pe orizontală până când acoperă întreaga zonă alocată pe pagina web pentru acest element HTML particular (în exemplul nostru, a fost o paragraf). De ce se întâmplă?
Background-repeat - repetați imaginea de fundal
Da, pentru că nu am scris nicio valoare pentru regula CSS fundal-repetare, ceea ce înseamnă că va fi utilizată valoarea implicită. Privind specificația, aflăm că această valoare corespunde cu „repetare” (repetarea imaginii de-a lungul tuturor axelor). Răspunsul a venit de la sine.
Prin urmare, cu fundal-repetare putem gestionați repetările imaginii de fundal... Această regulă poate avea doar patru valori:
Background-position - poziționarea fundalului
Acum apare întrebarea: este posibil să mutați imaginea de fundal departe de colțul din stânga sus al zonei, limitând dimensiunea elementului. Desigur, puteți, și în acest scop există o regulă separată fundal-poziție:
Privind specificațiile CSS, devine clar de ce imaginea de fundal implicită este amplasată exact la marginea din stânga sus a zonei elementului Html. Deoarece valoarea „0% 0%” este implicită pentru regula poziției de fundal.
Ei bine, atunci când această regulă nu este stabilită în mod explicit pentru un element (ca în cazul nostru), atunci browserul își selectează valoarea acceptată în specificație în mod implicit (rețineți că axele de coordonate din CSS sunt raportate doar din marginea din stânga sus a elementul de zonă).
Puteți vedea, de asemenea, din specificații că valorile relative (procente) și absolute (de exemplu) pot fi utilizate pentru a poziționa imaginea de fundal utilizând poziția de fundal. Ei bine, puteți utiliza și cuvinte care vor corespunde anumitor valori numerice. Dar mai întâi lucrurile.
Când setați poziționarea imaginii de fundal folosind unități absolute în poziția de fundal, are loc următorul principiu de determinare a poziției sale finale:
Acestea. browserul va calcula compensările specificate de-a lungul axelor X și Y de la originea zonei în care este poziționat obiectul până la originea acestei imagini. De exemplu, în acest paragraf, am poziționat imaginea de fundal prin poziția de fundal folosind următoarele reguli CSS:
Imagine de fundal: url (https: //site/image/logo.png); background-repeat: no-repeat; fundal-poziție: 400px 25px;
Vă rugăm să rețineți că, în acest caz, va fi aliniat la centrul ecranului și nu la centrul zonei alocate pentru aceste paragrafe. Este clar că, în realitate, un astfel de aranjament al imaginii de fundal este puțin probabil să găsească aplicație.
Cu toate acestea, dacă setați o poziție de fundal fixă \u200b\u200bpentru elemente precum Corp sau Html (adică în etichetele care acoperă întreaga pagină web), atunci această imagine va fi întotdeauna vizibilă în fereastra de vizualizare și aceasta este exact utilizarea atașamentului de fundal Proprietate CSS în aspect modern de bloc.
Mai sunt ceva regulă prefabricată Fundal, care vă permite să combinați toate cele cinci reguli descrise mai sus într-o singură sticlă. Mai mult, valorile pentru toate cele cinci din versiunea combinată pot fi utilizate în orice ordine și în orice cantitate (sunt unice, iar browserul nu le va confunda între ele). Orice lucru pe care nu îl specificați în mod explicit, browserul va considera egal cu valoarea implicită.
Png) fără repetare 50%;
Regula de asamblare prezentată în exemplu se aplică acestui paragraf pentru claritate. S-a dovedit că nu este frumos, dar nu asta este ideea. Pentru acest paragraf, se folosește o umplutură de fundal galben ciudat, precum și o imagine a siglei LiveInternet, aliniată la centrul paragrafului. pentru că nu este specificată nicio valoare pentru regula atașamentului de fundal, apoi se folosește valoarea de defilare implicită.
Dacă pentru un anumit element doriți să setați doar o umplutură cu culoare și să nu vă deranjați cu imaginea de fundal, atunci puteți în schimb:
Culoare fundal: #FEFCDE
scrie:
Fundal: #FEFCDE
Pentru tot restul valorii regulii combinate va fi luată în mod implicit, și de asta aveți nevoie.
Multă baftă! Ne vedem în curând pe paginile site-ului blogului
S-ar putea să fii interesat
Stil list (tip, imagine, poziție) - reguli CSS pentru personalizarea aspectului listelor în codul HTML Cum să configurați culoarea de fundal alternativă a rândurilor de tabele, liste și alte elemente Html pe un site folosind pseudo-clasa n-copil 
Poziție (absolută, relativă și fixă) - modalități de poziționare a elementelor HTML în CSS (reguli stânga, dreapta, sus și jos) 
Plutește și clare în CSS - instrumente de aspect bloc 
Poziționarea cu indexul Z și regula CSS Cursor pentru a schimba cursorul mouse-ului 
Căptușire, margine și margine - stabilim margini interne și externe în CSS, precum și margini pentru toate laturile (sus, jos, stânga, dreapta) 
Afișare (bloc, niciunul, în linie) în CSS - setați tipul de afișare a elementelor HTML pe pagina web 
Priorități CSS și creștere cu importante, combinații de selector și grupare, personalizate și stiluri de autor 
CSS - ce este, cum se leagă foile de stil în cascadă de codul html folosind Style și Link 
Selectoare pentru etichetă, clasă (clasă), Id și generic, precum și selectoare de atribute în CSS modern
Cred că nu există un singur site în care proprietatea să nu fie folosită Fundal CSS... S-ar părea că 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, inclusiv transparență ș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 atribuții de culoare de fundal de multe ori. Acest lucru se poate face folosind mai multe tipuri de notație: obișnuită (se folosește denumirea 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ță, așa că îl puteți adăuga 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 folosită 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ă fixați lucrurile 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, facem 4 „straturi”, mutăm fiecare imagine în colțul său ș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.
Când utilizați orice imagine ca fundal, trebuie să aveți în vedere două reguli:
- 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.
informatie scurta
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. moștenește Moștenește valoarea părintelui.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 lui hasLayout setată. Dacă un element nu are hasLayout, proprietatea imagine de fundal va respecta marginile elementului, așa cum este specificat î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ă deruleze sau automat, Internet Explorer 8 va avea o întârziere verticală de un pixel atunci când fundalul se derulează.
Internet Explorer 7.0 sau o versiune ulterioară nu acceptă valoarea moștenită.
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).
Figura: 1. Repetarea fundalului pentru fiecare celulă
Figura: 2. Fundal pentru întreaga linie
