Una dintre cele mai frecvente sarcini este capacitatea de a seta fundalul unui container. De obicei, aceasta este o culoare, gradient sau imagine.
Culoare ca fundal
Pentru a seta culoarea ca fundal, selectați culoarea dorită din paletă sau introduceți valoarea acesteia manual. Activați această opțiune dând un cec în caseta de selectare.
Atenție vă rog! Dacă activați culoarea fundalului, acesta va suprascrie toate celelalte fundaluri ale elementului. Dacă aveți nevoie de o anumită culoare ca unul din mai multe fundaluri ale unui element, creați-o printr-un gradient, alegând aceleași culori pentru "steaguri".
Butonul "1" resetează valoarea culorii. Panoul din stânga este necesar pentru a selecta schema de culori dorită. Panoul din partea dreaptă specifică transparența culorii. Panoul din partea de jos vă permite să salvați culori utilizate frecvent.
Gradient ca fundal
A doua variantă a fundalului pentru bloc este gradientul. Un gradient poate consta din două sau mai multe culori. Pentru a adăuga un "marcaj" la culoare, faceți dublu clic pe bara cu o intensitate a culorii.
Pentru a elimina caseta de validare, faceți clic pe ea de 2 ori și în panoul deschis faceți clic pe butonul "șterge". Gradient culori pot fi, de asemenea, transparente.
Gradientul poate fi liniar și radial. Pentru a comuta între moduri, utilizați butoanele 1 și 2. Fiecare tip de gradient are propriile setări și puteți experimenta cu ușurință cu ele.
De asemenea, gradientul are 2 opțiuni:
- - Un buton de rotație a gradientului care, atunci când este activat, va înclina gradientul la 180 de grade.
- - Buton pentru a bifa gradientul. Când este activată, gradientul se va repeta pe termen nelimitat.
Gradient ca fundal
Una dintre cele mai comune funcții. Această funcție este recomandată nu numai pentru butoane, ci și pentru containere. De exemplu, dacă doriți să inserați o fotografie ca fundal și apoi să plasați orice conținut pe ea. Este mai bine să o inserați ca fundal, decât să utilizați widget-ul "imagine". În cazul în care este necesar să se facă un bloc adaptiv cu o imagine de fundal, este mai bine să se utilizeze această funcție. Când lucrați cu animație, este, de asemenea, adesea folosit ca un fundal, mai degrabă decât un widget
Mai jos vom discuta în detaliu:
Mai întâi, setați caseta radio "Imagine" pentru a activa această funcție. Apoi, trebuie să încărcați imaginea de fundal. Acest lucru se poate face în două moduri:
- - Descărcați direct de pe PC
- - Încărcați utilizând catalogul de imagini
După aceste acțiuni, în funcție de tipul și scopul imaginii de fundal, setați setările de fundal.
Selectați poziția de fundal (1) și corectați-o, dacă este necesar, folosind glisoarele din dreapta (2). De asemenea, setați regulile pentru repetarea fundalului sau dezactivați-l (3).
Următoarea caracteristică importantă este "dimensiunea fundalului".
Pot avea 3 valori:
Auto: dacă este setat în același timp pentru lățime și înălțime (auto auto), dimensiunea fundalului rămâne originală; dacă numai pentru o parte a imaginii (100px auto), atunci dimensiunea este calculată automat în funcție de proporțiile imaginii.
Coperta: Scade imaginea menținând proporțiile acesteia astfel încât lățimea sau înălțimea sa să fie egală cu lățimea sau înălțimea blocului.
Conține: Scade imaginea cu proporțiile păstrate astfel încât imaginea să fie complet plasată în interiorul blocului.
Următoarea caracteristică utilă este capacitatea de a repara fundalul. Când această opțiune este activată, fundalul va fi stabilit când pagina este derulată. Și va crea efect similar cu efectul paralaxului. Se recomandă utilizarea acestei funcții ca alternativă la acest efect asupra versiunilor și tabletelor mobile pentru o încărcare mai rapidă a paginii.
Atenție vă rog! Când fundalul este unul, gradientul și imaginea nu vor funcționa până când nu îl activați făcând clic pe pictograma roșie cu ochiul.
Gradient ca fundal
Puteți crea un fundal nou introducând numele acestuia în câmp și făcând clic pe butonul "plus". Fiecare fundal separat poate fi activat și dezactivat cu pictograma "ochi" din stânga.
De cele mai multe ori, funcția mai multor fundaluri este aplicată butoanelor, atunci când este necesar să setați simultan un gradient și să inserați o pictogramă. Dar, de multe ori, este folosit pentru a "decora" elementele unui sit, de exemplu, pentru a întuneca o imagine cu un gradient.
Aveți posibilitatea să swap fundaluri prin tragerea lor cu mouse-ul. În acest caz, primul fundal va fi cel mai înalt.
Atenție vă rog! Culoarea nu este un fundal. Când este activată, va suprascrie toate fundalul elementului. Dacă doriți să setați culoarea ca unul din fundaluri, faceți acest lucru printr-un gradient. Se recomandă utilizarea unei "culori" de diblu în combinație cu alte fundaluri, dacă este necesar, din cauza blocării sau a luminozității prin culoare. (Selectați o culoare și setați transparența acesteia).
Exemplu de aplicare a mai multor fundaluri pe butoane:
Trimiteți-le prietenilor: