Următoarele elemente sunt imaginea de fundal a paginii. Fundal în CSS (culoare, poziție, imagine, repetare, atașament) - totul pentru setarea culorii de fundal sau a imaginii de fundal a elementelor HTML
informatie scurta
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. niciunul Anulează imagine de fundal pentru element. inherit 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 până la versiunea 7.0 inclusiv, aplică fundalul la interiorul chenarului 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ă.
Versiunile de Internet Explorer până la 7.0 inclusiv 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 |
Rezultat acest exemplu V browser Chrome prezentată în fig. 1. Motor de cautare Explorer, Opera și Firefox afișează corect fundalul pentru linie (Figura 2).
Orez. 1. Repetați fundalul pentru fiecare celulă
Orez. 2. Fundal pentru întreaga linie
Bună ziua, dragi cititori ai blogului. Astăzi ne vom uita la cinci reguli CSS care vă permit să setați un fundal pentru orice element în Html - fundal-poziție (imagine, repetare, culoare, atașament). Ei bine, să nu uităm de asemenea să menționăm regula compusă de fundal.
Nu este nimic complicat în acest sens, dar există anumite subtilități și nuanțe pe care trebuie să le cunoașteți și deja șablon gata făcut(rețineți despre, ceea ce va ajuta la dezvăluirea tuturor dezavantajelor 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 studiul stilului de markup de la început, și anume cu un articol despre ce este CSS și cu ce este folosit, apoi urmați în ordinea dată. în cartea de referință. Deși, în orice caz, depinde de tine, dar acum să vorbim despre setarea fundalului.
Culoare, culoare de fundal și imagine de fundal
Să vedem mai întâi cum este setată culoarea elemente HTML prin utilizarea Reguli 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 făcută în limbajul de marcare hipertext. După cum vă amintiți, plasat după semnul hash (hash - „#fe35a3”) sau folosind trei cifre, dacă prima coincide cu valoarea celei de-a doua, a treia cu a patra și, respectiv, a cincea cu a șasea ( codul de culoare „#aa33ff” poate fi scris pe scurt ca „a3f”).
De asemenea, culori în Html și Cod Css poate fi reprezentat ca cuvinte (de exemplu, „roșu”), dar cel mai adesea este folosit codul hexazecimal:
Culoare:#303
De exemplu, am colorat acest mic paragraf la aceeași culoare ca mai sus (#303). Acum este ușor diferită de culoarea tuturor celorlalte paragrafe (mai întunecată), care este setată la #555 în fișier CSS folosit de mine Teme WordPress. Dar setarea culorii folosind culoarea este destul de simplă, dar cu fundalul va fi puțin mai complicat.
Asa de, pentru fundal în Css Există cinci reguli care pot fi combinate într-una singură, dacă se dorește. Pentru a le vedea, puteți accesa pagina actuală de specificații W3C și căutați orice cu cuvântul Fundal:
- culoare de fundal - folosind această regulă, setați culoarea de fundal pentru orice element HTML. Puteți utiliza fie un cod, fie numele nuanței, de exemplu. totul este exact la fel ca atunci când folosea culoarea.
imagine de fundal - cu ea puteți folosi o imagine ca fundal (dar asigurați-vă că citiți despre ea, deoarece imaginile grele vor încetini încărcarea paginilor), calea către care va fi indicată în funcționalitatea url ().
Dacă te uiți la specificație, vei vedea asta culoarea de fundal implicită orice element va fi transparent (valoarea implicită a regulii este „background-color:transparent”). Adevărat, în elemente nu va fi transparent implicit, deoarece Acest elementele sistemuluiși cu ele totul este diferit și diferit de etichetele obișnuite ale limbajului de marcare hipertext.
Culoarea în culoarea de fundal este setată ca standard (șase sau trei cifre cod hexazecimal, sau cuvânt):
Culoare de fundal: #FEFCDE
De exemplu, fundalul acestui paragraf este specificat folosind background-color cu codul de culoare dat chiar mai sus.
Toate celelalte patru reguli CSS se vor referi doar la imaginea de fundal, care poate fi setată pentru orice element HTML și, dacă se dorește, poziționată cu precizie. Ce fișier grafic va fi utilizat poate fi specificat folosind imagine de fundal.
Dacă vă uitați la specificația limbajului de marcare, veți vedea că imaginea de fundal este implicită la „niciuna” (adică, nu este folosită nicio imagine pentru fundal). Ei bine, dacă mai aveți nevoie de acest lucru, atunci în funcționalitatea url() va trebui să indicaț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 un fundal, a cărui cale este descrisă chiar mai sus. Vedeți că întreaga zonă alocată acestui paragraf este acoperită cu o imagine care se repetă, care în original arată astfel:
Acestea. când se utilizează o singură regulă imagine de fundal care specifică calea către fisier grafic, aceeași imagine va fi înmulțită atât pe verticală, cât și pe orizontală până când acoperă întreaga zonă alocată pe pagina web pentru acest element HTML specific (în exemplul nostru a fost un paragraf). De ce se întâmplă asta?
Background-repeat - repeta imaginea de fundal
Da, pentru că nu am specificat nicio valoare pentru regula CSS fundal-repetare, ceea ce înseamnă că valoarea implicită va fi utilizată pentru aceasta. Privind specificația, aflăm că această valoare corespunde „repeat” (repetă imaginea pe toate axele). Răspunsul a venit firesc.
Prin urmare, cu background-repeat putem gestionați repetițiile imaginilor de fundal. Această regulă poate avea doar patru semnificații:
Background-position - poziționare de fundal
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 că poți și există o regulă separată în acest scop. fundal-poziție:
Privind specificația CSS, devine clar de ce imaginea de fundal este apăsată în mod implicit exact în marginea din stânga sus a zonei elementului HTML. Deoarece valoarea „0% 0%” este valoarea implicită pentru regula poziției de fundal.
Ei bine, atunci când această regulă nu este setată în mod explicit pentru un element (ca în cazul nostru), atunci browserul își selectează valoarea, care este acceptată în specificație în mod implicit (rețineți că axele de coordonate în CSS sunt raportate exact din marginea din stânga sus a elementului zonă).
Este, de asemenea, clar din specificație că pentru a poziționa imaginea de fundal folosind poziția de fundal, puteți utiliza atât relativ (procent), cât și valori absolute(De exemplu, ). Ei bine, puteți folosi și cuvinte care vor corespunde anumitor valori digitale. Dar mai întâi lucrurile.
Când setați poziționarea imaginii de fundal folosind unități absoluteîn poziția de fundal, se utilizează următorul principiu pentru a determina poziția sa finală:
Acestea. browserul va calcula liniuțele specificate de-a lungul axelor X și Y de la originea zonei în care este poziționat obiectul până la originea acestei imagini în sine. 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 zonei de vizualizare și nu la centrul zonei alocate acestor paragrafe. Este clar că, în realitate, o astfel de plasare a unei imagini de fundal este puțin probabil să fie utilizată.
Cu toate acestea, dacă setați o poziție fixă de fundal pentru elemente precum Body sau Html (adică în etichete care acoperă întreaga pagină web), atunci această imagine va fi întotdeauna vizibil în zona de vizualizare și exact așa este utilizat proprietate CSS atașare de fundal în aspectul bloc modern.
Mai sunt ceva regulă prefabricată Context, care vă permite să combinați toate cele cinci reguli descrise mai sus într-o sticlă. Mai mult, valorile pentru toate cele cinci din versiunea combinată pot fi folosite în orice ordine și în orice cantitate (sunt unice și browserul nu le va confunda între ele). Orice ceea ce nu specificați în mod explicit va fi presupus de browser ca fiind valoarea implicită.
Png) fără repetare 50%;
Exemplul de regulă prefabricată este aplicată acestui paragraf pentru claritate. Nu a ieșit frumos, dar nu acesta este principalul lucru. Acest paragraf folosește o umplere ciudată de fundal Culoarea galbena, și folosește, de asemenea, o imagine a siglei Liveinternet, aliniată în centrul paragrafului. Deoarece Dacă regulii de atașare de fundal nu i se dă nicio valoare, atunci se folosește valoarea de defilare (implicit).
Dacă pentru un element doriți să setați doar o umplere de culoare și să nu vă deranjați cu o imagine de fundal, atunci puteți face acest lucru:
Culoare de fundal: #FEFCDE
scrie:
Context: #FEFCDE
Deoarece toate celelalte valori ale regulii prefabricate vor fi luate în mod implicit și de asta aveai nevoie.
Multă baftă! Inainte de pe curând pe paginile site-ului blogului
Puteți viziona mai multe videoclipuri accesând");">
S-ar putea să fiți interesat
Stil listă (tip, imagine, poziție) - reguli Css pentru personalizarea aspectului listelor în cod HTML
Cum să configurați culoarea de fundal alternativă a rândurilor de tabele, liste și alte elemente HTML de pe site folosind pseudoclasa a nth-child 
Poziție (absolută, relativă și fixă) - moduri de a poziționa elementele HTML în CSS (reguli stânga, dreapta, sus și jos) 
Float și clear în CSS - instrumente aspectul blocului
Poziționarea folosind indexul Z și regula CSS Cursor pentru a schimba cursorul mouse-ului
De la autor: Bună ziua tuturor. Culorile și imaginile de fundal joacă un rol important în designul web, deoarece vă permit să proiectați orice elemente mai atractiv. Astăzi ne vom uita la cum să facem un fundal în HTML.
Este posibil să folosiți HTML pentru a seta fundalul?
O sa spun imediat ca nu. În general, html nu a fost creat pentru a proiecta pagini web. Este doar 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 Cascading Style Sheets (CSS). Există mult mai multe oportunități pentru a stabili un fundal. Astăzi ne vom uita la cele mai elementare.
Cum să setați un fundal folosind css?
Deci, în primul rând, trebuie să decideți pentru ce element doriți să setați fundalul. Adică trebuie să găsim un selector căruia îi vom scrie o regulă. De exemplu, dacă trebuie să setați fundalul pentru întreaga pagină ca întreg, puteți face acest lucru prin selectorul de corp și pentru toate blocurile prin selectorul div. Ei bine, etc. Fundalul poate și ar trebui să fie legat de orice alți selectori: clase de stil, identificatori etc.
După ce v-ați decis asupra selectorului, trebuie să scrieți numele proprietății în sine. Pentru a seta culoarea de fundal (și anume o culoare solidă, nu un gradient sau o imagine), utilizați proprietatea background-color. După aceasta, trebuie să puneți două puncte și să scrieți culoarea în sine. Acest lucru se poate face în moduri diferite. De exemplu, folosind cuvinte cheie, cod hexadecimal, formate rgb, rgba, hsl. Orice metoda va funcționa.
Cea mai des folosită metodă este codul hexazecimal. Pentru a selecta culorile, puteți utiliza un program care afișează codul culorilor. De exemplu, Photoshop, vopsea sau un instrument online. În consecință, ca exemplu, voi scrie un fundal general pentru întreaga pagină web.
corp (culoare de fundal: #D4E6B3; )
Acest cod trebuie inserat în secțiunea de cap. Este important ca fișierele să fie în același folder.
Imagine ca fundal
Voi folosi o pictogramă mică ca imagine. limbaj html:
Să creăm un bloc gol cu un identificator:
< div id = "bg" > < / div > |
Să-i dăm dimensiuni și fundal explicite:
#bg( lățime: 400px; înălțime: 250px; imagine de fundal: url(html.png); )
#bg( latime: 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 destinat în mod special inserării unei imagini ca fundal într-un element html. Să vedem ce s-a întâmplat:
Pentru a specifica o imagine, trebuie să scrieți după două puncte cuvânt cheie url, apoi indicați calea către fișier î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 este afișat în bloc, verificați din nou dacă ați scris corect numele imaginii, dacă calea și extensia sunt setate corect. Acestea sunt cele mai multe motive comune că fundalul pur și simplu nu apare deoarece browserul nu poate găsi imaginea.
Dar ai observat un lucru? Browserul a preluat și a înmulțit imaginea pe tot blocul. Deci, ca să știți, acesta este comportamentul implicit al imaginilor de fundal - ele sunt repetate pe verticală și pe orizontală atâta timp cât pot încadra în bloc. Prin acest comportament, puteți controla cu ușurință. 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 pe axa x;
Repeat-y – se repetă numai de-a lungul axei y;
No-repeat – nu se repetă deloc;
Puteți scrie fiecare valoare și puteți vedea ce se întâmplă. O sa scriu asa:
background-repeat: repetare-x;
fundal - repetare : repetare - x ; |
Acum repetați doar pe orizontală. Dacă setați opțiunea fără repetare, atunci ar fi o singură imagine.
Grozav, putem termina aici, deoarece acestea sunt capabilitățile de bază ale lucrului cu fundal, dar vă voi arăta încă 2 proprietăți care vă permit să obțineți mai mult control.
Prin repetare, designerii de layout erau capabili să creeze texturi de fundal și degrade folosind o singură imagine mică. Ar putea fi de 30 pe 10 pixeli sau chiar mai mic. Sau poate un pic 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 erau vizibile tranziții, astfel încât rezultatul a fost un fundal unic, fără sudură. Apropo, această abordare ar trebui folosită acum dacă doriți să o utilizați textură fără sudură pe site-ul dvs. ca fundal. Astăzi gradientul poate fi deja implementat folosind metode css3, despre asta vom vorbi cu siguranță mai târziu.
Poziția de fundal
În mod implicit, imaginea de fundal, cu excepția cazului în care este setată să se repete, va fi în colțul din stânga sus al blocului său. Dar poziția poate fi schimbată cu ușurință folosind proprietatea background-position.
Îl puteți seta în diferite moduri. O opțiune este să indicați pur și simplu părțile în care ar trebui să fie amplasată imaginea:
poziția de fundal: dreapta sus;
fundal - poziție: dreapta sus; |
Adică pe verticală totul rămâne la fel: imaginea de fundal este situată deasupra, dar pe orizontală am schimbat partea în dreapta, adică în dreapta. O altă modalitate de a seta o poziție este ca procent. Î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 poza exact în centru, o scriem astfel:
fundal-poziție: 50% 50%;
fundal-poziție: 50% 50%; |
Amintiți-vă un lucru important despre 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%, atunci puteți concluziona imediat că imaginea de fundal va fi deplasată mult spre dreapta, dar nu va scădea prea mult.
Și, în sfârșit, puteți specifica poziția în pixeli. Totul este la fel, doar că în loc de % va fi px. În unele cazuri, o astfel de poziționare poate fi necesară.
Notație scurtă
Sunteți de acord că codul se dovedește a fi destul de greoi dacă totul este setat așa cum am procedat noi. Se pare că trebuie specificată calea către imagine, repetarea și poziția. Desigur, repetarea și poziția nu sunt întotdeauna necesare, dar, în orice caz, ar fi mai corect să folosiți o notație scurtă pentru proprietate. Arata cam asa:
fundal: #333 url(bg.jpg) no-repeat 50% 50%;
fundal: #333 url(bg.jpg) no-repeat 50% 50%; |
Adică, primul pas este să înregistrați culoarea generală de fundal solidă, dacă este necesar. Apoi calea către imagine, repetare și poziție. Dacă nu este necesar un parametru, atunci pur și simplu omiteți-l. 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 formă prescurtată, chiar dacă trebuie să indicați doar o culoare sau o imagine.
Controlul dimensiunii imaginii de fundal
Imaginea noastră actuală nu este foarte bună pentru a demonstra următorul truc, așa că voi lua altul. Lasă-l de dimensiunea unui bloc sau mai mare. Așadar, imaginați-vă că vă confruntați cu sarcina de a realiza o imagine de fundal, astfel încât să nu-și umple complet blocul. Iar imaginea, de exemplu, este chiar mai mare decât dimensiunea blocului.
Ce poți face în acest caz? Desigur, cea mai simplă și mai rezonabilă opțiune ar fi să reduceți pur și simplu imaginea, dar nu este întotdeauna posibil să faceți acest lucru. Să spunem că se află pe server și în acest moment nu există timp sau oportunitate pentru a o reduce. Problema poate fi rezolvată folosind proprietatea background-size, care poate fi numită relativ nouă și care vă permite să manipulați dimensiunea imaginii de fundal și, într-adevăr, orice fundal.
Deci imaginea mea ocupă acum tot spațiul din bloc, dar îi voi da o dimensiune de fundal:
dimensiunea fundalului: 80% 50%;
dimensiunea fundalului: 80% 50%; |
Din nou, primul parametru setează dimensiunea orizontală, al doilea - dimensiunea verticală. Vedem 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 ca procent, puteți influența proporțiile imaginii. Asa ca aveti grija daca vreti sa nu suparati proportiile.
După cum puteți ghici, dimensiunea fundalului poate fi specificată și în pixeli. Mai sunt două cuvinte cheie care pot fi, de asemenea, folosite:
Coperta – imaginea va fi scalată astfel încât cel puțin pe o parte să umple complet blocul.
Conține – o scalează astfel încât imaginea să se potrivească complet în bloc la dimensiunea sa maximă.
Avantajul acestor valori este că nu schimbă proporțiile imaginii, lăsându-le la fel.
De asemenea, ar trebui să înțelegeți că întinderea imaginii poate duce la o deteriorare a calității acesteia. Pot da un exemplu din viața și practica reală a designerilor de layout. Toată lumea știe și înțelege că atunci când proiectați pentru desktop-uri, trebuie să adaptați site-ul la lățimile principale ale monitorului: 1280, 1366, 1920. Dacă luați o imagine de fundal cu o dimensiune de, să zicem, 1280 pe 200 și nu o dați o dimensiune de fundal, apoi vor apărea ecrane cu o lățime mai mare loc gol, imaginea nu va umple complet lățimea.
Î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. Acest bun venit, care ar trebui folosit, dar acum vă veți confrunta cu problema că utilizatorii cu lățimea ecranului de 1920 pixeli pot vedea o calitate suboptimă a imaginii.
Permiteți-mi să vă reamintesc, se va întinde până la lățimea maximă. În consecință, calitatea se va deteriora automat. Numai decizia corectă va folosi inițial imaginea de aici dimensiune mai mare– 1920 pixeli lățime. Apoi chiar la ecrane late va avea dimensiunea sa naturală, iar pe altele va fi pur și simplu decupat treptat, dar, în același timp, cu o selecție adecvată a imaginii de fundal, pe aspect Acest lucru nu va afecta site-ul.
În general, acesta este doar un exemplu despre cum să utilizați cunoștințele pe care le-ați dobândit în acest articol atunci când amenajați machete reale.
Fundal translucid folosind css
O altă caracteristică cu care se poate implementa folosind css – fundal translucid. Adică prin acest fundal se va putea vedea ce este în spatele lui.
De exemplu, voi seta întreaga pagină ca fundal pentru imaginea pe care am folosit-o mai devreme în exemple. Pentru blocul cu identificatorul bg, pe care ne desfășurăm toate experimentele, vom seta fundalul folosind formatul de setare a culorii rgba.
După cum am spus mai devreme, există multe formate pentru setarea culorilor în CSS. Unul dintre ele este rgb, destul format cunoscut celor care lucrează în editori grafici. Se scrie astfel: rgb(17, 255, 34);
Prima valoare dintre paranteze este saturația de roșu, apoi verde, apoi albastru. Valoarea poate fi numerică de la 0 la 255. În consecință, format rgba nu este diferit, este adăugat doar un singur parametru - canalul alfa. Valoarea poate fi de la 0 la 1, unde 0 este transparența totală.
