Locație de fundal CSS. Fundal în CSS (culoare, poziție, imagine, repetare, atașament) - totul pentru setarea culorii de fundal sau a imaginii de fundal a elementelor HTML

Una dintre cele mai comune sarcini la editarea textului și a blocurilor în HTML și CSS. Nu numai un designer de aspect, ci și orice manager de conținut care editează conținutul unui site web poate întâmpina această problemă. Pentru solutii această problemă sunt folosite doar două proprietăți: culoare - culoarea textului, fundal - lucrul cu fundalul, culoarea sau imaginea.

Lucrul cu culoarea de testare în CSS

culoare este o proprietate necesară pentru a specifica o culoare numai pentru text. Culoarea poate fi specificată fie în format de cod HTML HEX, fie în format RGB (Roșu, Verde, Albastru). Codurile de culoare pot fi selectate fie în programe de grafică, de exemplu, Photoshop sau online

Sintaxa proprietății:

Culoare: Culoare;
Acum aplicăm proprietatea:

Continut (
culoare: #444; // text gri închis într-un element cu clasa de conținut
}
De ce exact acest exemplu: specificarea culorii pentru link și pentru text sunt lucruri diferite. Tine minte. Ei bine, personal recomand să faceți textul și linkurile în culori diferite.

Lucrul cu fundaluri în CSS

fundal este o proprietate care vă permite să lucrați cu fundalul unei imagini: setați culoarea de fundal, setați o imagine ca fundal ( formate jpg, gif, png), modificați poziția de fundal și alți parametri descriși mai jos.

culoare de fundal- Această proprietate este folosită numai pentru a seta culoarea de fundal. Acceptă doar codul de culoare. Culoarea poate fi specificată în format RGB (Red Green Blue) sau în format HTML HEX cod.

Bloc (
culoare de fundal: #fbb5b5; // setați culoarea de fundal la stacojiu pastel
}
Cele mai bune exemple de culori de fundal (modele de design modern: Design plat si etc):

imagine de fundal este o proprietate care este folosită pentru a seta o imagine ca fundal într-un element. Pentru a specifica o imagine, parametrul url și calea către imagine în raport cu fișierul cu stiluri CSS sunt suficiente.

#înapoi (
imagine de fundal: url("imagini/fon.jpg");
}

fundal-repetare- poate fi folosit numai dacă proprietatea imagine de fundal a fost specificată mai sus. Această proprietate stabilește regula de repetare a imaginii. În mod implicit, imaginea se repetă de-a lungul axei X și de-a lungul axei Y până la marginile elementului (dacă fundalul este mai mic decât elementul). În proprietate, puteți specifica o setare astfel încât imaginea să fie repetată numai de-a lungul axei X - repetare-x (orizontal), numai de-a lungul axei Y - repetare-y (verticală) sau să nu se repete deloc - fără repetare.

#conținut (

background-repeat: repetare-x; /* imaginea se va repeta doar orizontal până la limitele blocului */
}

atașament de fundal- fixează fundalul într-o singură poziție, adică imaginea va derula împreună cu conținutul blocului sau va rămâne fixă. Valoarea implicită este scroll, care nu fixează poziția de fundal.

#conținut (
imagine de fundal: url("background.jpg");
background-repeat: repetare-x; /* imaginea se va repeta doar orizontal */
fundal-atașare: fix; /* fixat la locație */
}

fundal-poziție- o proprietate care specifică locația fundalului în element. Sunt specificate două valori: poziția orizontală și apoi poziția verticală. Este specificat fie digital (pixeli și procente), fie alfabetic (stânga, centru, dreapta, sus, jos). Această proprietate este necesară atunci când imaginea nu se repetă (nu se repetă), iar fundalul trebuie plasat în element într-un anumit fel.

#bloc (
fundal-poziție: centru stânga; /* orizontal - în partea stângă, vertical - în mijloc */
}
Cred că totul este clar în comentariu)
Un exemplu de scriere a unei valori digitale:

#chei (
fundal-poziție: 109px 57px; /* marginea din stânga 109px, sus 57px */
}
Și aici cred că totul ar trebui să fie clar.
Multe proprietăți? Să vedem cum se scrie prescurtat.

În cele din urmă. Prescripție pentru fundal în CSS

Puteți utiliza o notație prescurtată, în care toți parametrii vor fi indicați în linie:

Fundal: imagine color repeta pozitia atasamentului;

Despre avantaje. Acest tip de înregistrare reduce timpul de încărcare a paginii și redarea browserului. Fiți milă de vizitatorii dvs., este mai bine să scrieți astfel, cu excepția cazului în care, desigur, aveți nevoie de mai multe proprietăți.
Da, puteți sări peste orice proprietate dacă nu este nevoie de ea! Continuați doar să specificați valorile mai jos în listă.

Bloc (
fundal: #f1f1f1 url("background.jpg") repetare-x derulare 100px 125px;
}

Un exemplu despre cum funcționează fundalurile în CSS

Exemplu de cod. Puteți vedea rezultatul lucrării și codul sursă la linkul de mai jos.

În cazul unei imagini de fundal, este mai bine să specificați dimensiunile blocului, altfel acesta va fi dimensionat în funcție de conținut.

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. none Dezactivează imaginea de fundal pentru element. inherit Moștenește valoarea părintelui.

HTML5 CSS2.1 IE Cr Op Sa Fx

Model 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 ), apoi Chrome, Safari, iOS îl afișează nu așa cum este prescris de specificație, și anume pentru fiecare celulă separat. În timp ce browserul ar trebui să arate un fundal solid pentru întregul rând. Exemplul 2 arată codul care demonstrează eroarea.

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 (Fig. 2).

Orez. 1. Repetați fundalul pentru fiecare celulă

Orez. 2. Fundal pentru întreaga linie

Cred că nu există un singur site unde proprietatea să nu fie folosită Fundal CSS. S-ar părea că ce poate fi mai simplu decât această proprietate? Dar nu, capabilitățile sale sunt mult mai largi decât atribuirea obișnuită a unei imagini sau culori ca fundal de pagină. Unele lucruri vor fi familiare, în timp ce altele vor fi probabil noi pentru mulți. În orice caz, va fi util să știți în detaliu cum funcționează fundalul.

CSS3 a adus o mulțime de lucruri noi proprietății, cum ar fi transparența și alocarea mai multor imagini ca fundal, dar despre asta vom vorbi mai jos, dar mai întâi ne vom uita la elementele de bază ale proprietății fundal.

culoare de fundal

Sunt mai mult decât sigur că ați atribuit deja culoarea 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 echivalent, utilizați ceea ce vă place mai mult. Încerc să folosesc cea mai scurtă opțiune, iar pentru o percepție mai ușoară, fișierul de stil rezultat este puțin mai mic ca dimensiune.

P (culoarea fundalului: roșu;) p (culoarea fundalului: #f00;) p (culoarea fundalului: #ff0000;) p (culoarea fundalului: rgb(255, 0, 0;))

CSS3 acceptă transparența, așa că o putem adăuga la culoarea noastră, de exemplu astfel:

P (culoare de fundal: rgba(255, 0, 0, 0,5);)

Ultima cifră a stabilit transparența la 50%. Puteți seta valoarea transparenței de la 0 (complet fundal 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 a adăugat capacitatea de a atribui mai multe imagini fundalului, fiecare creându-și propriul strat, astfel încât fiecare ulterioară să se suprapună pe cea anterioară. De ce ar putea fi util acest lucru? Totul este destul de simplu - să presupunem că trebuie să înșurubați mici bibelouri în fiecare colț al site-ului. Având în vedere un aspect mai mult sau mai puțin cauciucat, utilizarea unei singure imagini nu este o opțiune. Prin urmare, facem 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, o lăsăm doar pe prima în cod, cred că este de înțeles.
Când utilizați orice imagine ca fundal, ar trebui să vă amintiți două reguli:

• a stabilit culoare contrastantă fundal în cazul în care utilizatorul nu vede imaginea dintr-un motiv oarecare. Pur și simplu poate opri afișarea imaginilor, economisind trafic.
• nu utilizați o imagine de fundal pentru a transmite niciuna Informații importante. Din motivele expuse mai sus, este posibil ca utilizatorul să nu-l vadă.

Suportul pentru mai multe imagini de fundal este destul de extins. Toate browserele, chiar și IE8, acceptă această proprietate.

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 sarcina culoare de fundal(și anume o culoare solidă, nu un gradient sau o imagine) se folosește proprietatea culoarea de fundal. 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 hex, rgb, rgba, formate hsl. Orice metodă va funcționa.

Metoda cea mai des folosită cod 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

Pentru imagine o voi folosi pictogramă mică 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 și apoi în parantezele specificați calea către fișier. ÎN î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 faptul că fundalul pur și simplu nu este afișat, 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 - acestea sunt repetate pe verticală și pe orizontală atâta timp cât se 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 asta acum, din moment ce asta capabilități de bază lucrați cu fundalul, 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 poziția 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 valoarea 80% 20%, atunci puteți concluziona imediat că imaginea de fundal va fi deplasată foarte mult la dreapta, dar nu va coborî 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ă.

Notare 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. Și 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, sau chiar 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ă, în timp ce pe altele va fi pur și simplu decupat treptat, dar, în același timp, dacă selectați corect imaginea de fundal, acest lucru nu va afecta aspectul site-ului.

Î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ă care poate fi implementată folosind css este 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 sarcinii culori rgba.

După cum am spus mai devreme, există multe formate pentru setarea culorilor în CSS. Unul dintre ele este rgb, un format destul de cunoscut pentru cei care lucrează în el 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ă.

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 să studiați stilul de markup de la început, și anume cu un articol despre ce este CSS și cu ce se folosește, 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 să setăm Culoare HTML elemente folosind 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 limbaj 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șierul CSS pe care îl folosesc 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:

1. 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 de cod hexazecimal sau un 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ă, nicio imagine nu este folosită 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 stânga? colțul de sus zonă care limitează 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ă implicit în specificație (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 fundal-position, 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 are loc următorul principiu determinarea poziției sale finale:

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 personalizare aspect liste în cod HTML Cum să configurați culoarea de fundal alternativă a rândurilor de tabele, liste și altele elemente HTML pe site-ul web folosind pseudoclasa a nth-child
Poziția (absolută, relativă și fixă) - metode Poziționare HTML elemente î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