CSS este un acronim pentru Cascading Style Sheets. Este un limbaj de proiectare simplu, dar puternic, care are capacitatea de a transforma pagini web. În termeni simpli, simplifică procesul de a face paginile web prezentabile și atrăgătoare pentru utilizatori cu ajutorul . În acest articol, vom înțelege cum să implementăm diverse imagini de fundal în CSS în următoarea ordine:
- Imagine de fundal în Proprietăți CSS
- Imagine de fundal în CSS
- Repetați fundalul
- Atașament de fundal
- Poziția de fundal
- Imagine de fundal în dimensiunea CSS
- Culoare de fundal
Imagine de fundal în Proprietăți CSS
Există multe proprietăți care sunt utilizate pentru a controla comportamentele și poziționarea imaginii. Aceste proprietăți sunt:
- imagine de fundal
- fundal-repetare
- atașament de fundal
- fundal-poziție
- dimensiunea fundalului
- culoare de fundal
Ne vom familiariza cu fiecare dintre aceste proprietăți și vom vedea când și cum să le folosim cu o demonstrație interesantă.
Imagine de fundal în CSS
imagine de fundal proprietatea, așa cum sugerează și numele, este pur și simplu utilizată pentru a indica și seta imaginea de fundal printr-un element dintr-o pagină web. În mod implicit, o imagine de fundal este plasată în colțul din stânga sus al unui element.
sintaxă: background-image: url | none | gradient liniar | gradient radial
body {background-image: url ('apple.jpg')}fundal folosind adresa URL
Să înțelegem parametrii:
- url: Introducerea acestui parametru ne permite să specificăm fie o cale a fișierului către orice imagine, fie adresa URL a imaginii care trebuie setată ca fundal. Pentru a declara mai multe imagini, adresele URL sunt separate printr-un delimitator de virgule.
body {background-image: url ('apple.jpg')} 
- nici unul: Aceasta este valoarea implicită a proprietății și nu se redă nicio imagine de fundal dacă se specifică valoarea acesteia.
corp {fundal: none}- gradient liniar (): Imaginea de fundal este setată la un gradient liniar. Pentru această proprietate sunt necesare cel puțin două culori, adică de sus în jos.
corp {fundal-culoare: # 001 fundal-imagine: gradient liniar (alb 15%, transparent 16%), gradient liniar (alb 15%, transparent 16%) dimensiune fundal: 60px 60px poziție fundal: 0 0, 30 px 30 px}- gradient radial (): Imaginea de fundal este setată la un gradient radial. Pentru această proprietate sunt necesare cel puțin două culori, adică pentru centru până la margini.
corp {fundal-culoare: # 001 fundal-imagine: gradient radial (alb 15%, transparent 16%), gradient radial (alb 15%, transparent 16%) dimensiune fundal: 60px 60px poziție fundal: 0 0, 30 px 30 px}- gradient liniar-repetitiv (): Repetă un gradient liniar. Să folosim același exemplu pe care l-am văzut mai sus în gradientul liniar pentru repetare-liniar-gradient și să vedem diferența.
corp {fundal-culoare: # 001 fundal-imagine: gradient liniar-repetitiv (alb 15%, transparent 16%), gradient liniar-repetitiv (alb 15%, transparent 16%) dimensiune fundal: 60px 60px fundal-poziție : 0 0, 30 px 30 px}convertiți binar în java int
- gradient radial-repetitiv (): Repetă un gradient radial. Haideți să explorăm același exemplu pe care l-am folosit mai sus într-un gradient radial.
corp {fundal-culoare: # 001 fundal-imagine: gradient radial-repetitiv (alb 15%, transparent 16%), gradient radial repetitiv (alb 15%, transparent 16%) dimensiune fundal: 60px 60px poziție fundal : 0 0, 30 px 30 px}Fundal de rezervă
Este întotdeauna recomandabil ca sfat profesional să adăugați o culoare de fundal ca opțiune alternativă. Este vorba de salvare, mai ales atunci când fie imaginile de fundal nu se încarcă, fie fundalul degradat pe care l-am setat în timp ce dezvoltăm nu este acceptat de unele dintre browserele vechi pe care este vizualizat.
Acest lucru nu strică experiența utilizatorului și poate fi declarat astfel:
corp {fundal: url (apple_lost.jpg) roz}Fundal multiplu
De asemenea, avem opțiunea de a seta mai multe imagini de fundal și este necesară în majoritatea cazurilor, cum ar fi o imagine de prim plan și de fundal. Ordinea imaginii este importantă aici, imaginea care ar trebui să fie în față este declarată mai întâi, iar imaginea care ar trebui să fie în partea din spate ultima este declarată în continuare.
Mai jos este exemplul pentru mai multe imagini de fundal:
body {background-image: url ('small-heart.jpg'), url ('background.jpg')}Repetați fundalul
Proprietatea background-repeat este utilizată împreună cu background-image pentru a defini comportamentul de repetare a unei imagini. Specifică dacă și cum se va repeta o imagine de fundal. Imaginea de fundal în mod implicit se repetă atât pe verticală, cât și pe orizontală.
Valorile posibile sunt:
- repeta- Imaginea se repetă atât pe orizontală, cât și pe verticală
- no-repeat - Imaginea nu se repetă
- repeat-x - Imaginea se repetă orizontal
- repeat-y - Imaginea se repetă vertical
- spațiu- Imaginea se repetă cu spații uniforme sau goluri între.
- rotund - Imaginea se repetă pentru a umple zona fără goluri între ele.
Sintaxa CSS pentru proprietatea background-repeat este:
repetare fundal: repeat | repeat-x | repeat-y | no-repeat | space | round
body {background-image: url ('heart.png'), url ('background.png') background-repeat: repeat-y, repeat-x background-color: #ffffff}Atașament de fundal
atașament de fundal proprietatea este utilizată împreună cu imaginea de fundal pentru a stabili dacă imaginea trebuie sau nu să deruleze pe măsură ce conținutul este derulat. Semnifică faptul că imaginea de fundal ar trebui să fie fixă sau ar trebui să deruleze împreună cu documentul în raport cu vizualizarea ferestrei browserului. Valoarea implicită este să derulați.
Valorile posibile sunt:
- scroll - Imaginea derulează împreună cu pagina.
- fix - Imaginea nu va derula împreună cu pagina
Sintaxa CSS pentru atașamentul de fundal este:
generează șir aleatoriu în java
atașament de fundal: scroll | fix
body {background-image: url ('heart.png'), url ('background.png') background-repeat: space, round}Poziția de fundal
fundal-poziție proprietatea este utilizată pentru a indica locația sau poziționarea unei imagini de fundal. Valorile posibile sunt:
- top
- dreapta
- fund
- stânga
- centru
- combinație a acestor valori (de exemplu, stânga sus)
Sintaxa CSS pentru poziția de fundal este:
poziție de fundal: sus | dreapta | stânga | jos | centru
body {background-image: url ('heart.png') background-repeat: no-repeat background-attachment: scroll}Imagine de fundal în dimensiunea CSS
Această proprietate este una dintre cele mai utile, deoarece ne permite să controlăm dimensiunea imaginii de fundal. Există diferite combinații pe care le putem folosi cu această proprietate și obținem rezultate în consecință. Valoarea implicită este automată.
Următoarele valori pot fi utilizate cu dimensiunea fundalului:
- auto
- o lungime - înălțime și lățime a imaginii, de ex. 20px 40px.
- un procent - înălțimea și lățimea imaginii ca procent w.r.t element părinte de ex. 50% 50%.
- centru - Aliniați imaginea la centru
- acoperire, scalarea imaginii pentru a acoperi complet după zona de fundal.
- conține, scalând imaginea pentru a se potrivi până la înălțimea și lățimea reală.
Sintaxa CSS pentru poziția de fundal este:
dimensiunea fundalului: valoare
body {background-image: url ('heart.png'), url ('background.png') background-repeat: fără repetare, repetare background-size: 400px 150px, copertă}body {background-image: url ('heart.png'), url ('background.png') background-repeat: fără repetare, repetare background-size: contain, 400px 150px}Culoare de fundal
Aceasta se aplică cea mai simplă dintre toate proprietățile din CSS. Aplică culori solide pe fundalul paginii. Valoarea acestei proprietăți poate fi specificată în culori (de ex. Roșu, albastru etc.), valoare hexagonală și valoare RGB.
Sintaxa CSS pentru culoarea de fundal este:
culoare de fundal: valoare
body {background-image: url (small-heart.jpg) background-color: # 22a8e3}Astfel se încheie toate proprietățile pe care le putem folosi cu fundalul. Putem încerca oricând diferite combinații de proprietăți așa cum am văzut în demonstrația noastră.
CSS este esențial și trebuie să dobândească abilități pentru fiecare dezvoltator web front-end. Ajută la proiectarea și stilizarea fundalului și la crearea de site-uri web impresionante și la îmbogățirea experienței utilizatorului. Cel mai bun este să continuați să experimentați și să profitați din plin de această tehnologie specială front-end, deoarece poate face minuni și transforma dinamic pagina.
Verificați-ne care vine cu instruire live condusă de instructor și experiență de proiect din viața reală. Acest training vă face să aveți abilități în a lucra cu tehnologii web back-end și front-end. Acesta include instruire în domeniul dezvoltării web, jQuery, Angular, NodeJS, ExpressJS și MongoDB.
Ai o întrebare pentru noi? Vă rugăm să o menționați în secțiunea de comentarii a blogului „Imagine de fundal în CSS” și vă vom răspunde.