Acest ghid de studiu va demonstra cum să utilizați imagini de fundal cu CSS. Deci, să începem!
Cum să utilizați mai multe imagini de fundal cu CSS?
CSS „ fundal Proprietatea ” este o proprietate scurtă care conține proprietăți de fundal, atașare de fundal, clip, imagine, repetare, origine, dimensiune și poziție. Proprietatea de fundal poate fi utilizată pentru a specifica adresele URL ale mai multor imagini. Aceste imagini sunt apoi poziționate și setate în consecință.
Să luăm un exemplu în care un element div conține o singură imagine ca sigla paginii web, în timp ce al doilea conține trei imagini.
Exemplu: Adăugarea mai multor imagini de fundal cu CSS
În HTML, adăugați un element div pentru logo și specificați numele clasei. De exemplu, l-am numit „ siglă ”. Al doilea div folosește mai multe imagini, așa că l-am numit „ imagini multiple ”. Cu toate acestea, puteți specifica numele clasei în funcție de preferințele dvs.
HTML
< div clasă = 'siglă' >< / div >< div clasă = 'mai multe imagini' >< / div >
În secțiunea următoare, vom ajusta imaginile folosind proprietatea de fundal CSS.
Stil „logo” div
.siglă {lăţime : 100% ;
înălţime : 50px ;
căptușeală : 5px ;
marginea : 5px ;
dimensiunea fundalului : 100px ;
fundal-repetare : fără repetare ;
imagine de fundal : url ( images/linux-logo.png ) ;
}
Elementul div cu clasa „ siglă ” se aplică cu următoarele proprietăți:
- „ lăţime Proprietatea ” este utilizată pentru a seta lățimea elementului la ” 100% ”.
- „ înălţime Proprietatea ” este folosită pentru a seta înălțimea elementului la ” 50px ”.
- „ căptușeală proprietatea ” este folosită pentru setarea „ 5px ” spațiu în jurul conținutului specificat al elementului.
- „ marginea ” proprietatea este utilizată pentru setarea “ 5px ” spațiu în jurul elementului.
- „ dimensiunea fundalului Proprietatea „ setează dimensiunea imaginii de fundal a elementului ca „ 100px ”.
- „ fundal-repetare „cu valoarea „ fără repetare ” afișează fundalul o singură dată.
- „ imagine de fundal ” este utilizată pentru a specifica adresa URL a imaginii.
Stil „imagini multiple” div
.multiple-imagini {lăţime : 90% ;
înălţime : 45vh ;
marginea : 1px auto ;
căptușeală : 20px ;
dimensiunea fundalului : 150px ;
culoare de fundal : rgb ( 157 , 154 , 151 ) ;
imagine de fundal : url ( imagini/birou.png ) , url ( imagini/html.png ) , url ( imagini/laptop.png ) ;
fundal-repetare : fără repetare , fără repetare , fără repetare ;
fundal-poziție : stânga , centru , dreapta ;
}
Acum, stilați celălalt container după cum urmează:
- „ culoare de fundal ”proprietatea specifică culoarea fundalului elementului.
- „ imagine de fundal „proprietatea specifică mai multe adrese URL de imagine.
- „ fundal-repetare Proprietatea ” setează valori pentru imagini dintr-o secvență de imagini specificată în proprietatea imagine de fundal. Ambele imagini sunt setate ca nerepetate, înseamnă că vor apărea în browser o singură dată.
- „ fundal-poziție ” ajustează poziția imaginii în secvența imaginilor specificată de proprietatea imagine de fundal. Prima imagine va fi setată în partea stângă, a doua în centru, iar a treia va fi plasată în partea dreaptă.
Prin furnizarea codului furnizat mai sus, rezultatul în browser va arăta astfel:
În acest fel, putem regla poziția mai multor imagini cu CSS.
Concluzie
Pentru a face aplicația distractiv și interactiv, dezvoltatorii folosesc imagini și culori diferite. Putem seta mai multe imagini cu proprietăți de fundal CSS, cum ar fi poziția fundalului, repetarea fundalului, dimensiunea fundalului și multe altele. Acest manual a demonstrat utilizarea mai multor imagini de fundal cu exemple CSS.