Transluciditatea în web design
Recent, clădirea site-ul utilizat în mod activ diverse tehnici asociate cu transparență. Acest lucru vă permite să creați site-uri de pălării frumoase și o varietate de elemente decorative. Datorită formatului PNG-24 are acum capacitatea de a încorpora pe o pagină web imagini translucide de diferite forme.
Primele trei valori sunt stocate valori numerice 0-255, în cazul în care 255 - cel mai mare procent de culoare. Transparența este definită în mod diferit - de la 0 la 1. Când scrieți 0, efectul va fi la fel ca în fundal: transparent, care este, cu fundal complet transparent.
De ce este necesar acest lucru toate
Ei bine, imaginați-vă că ați identificat pentru întreaga pentru o imagine de fundal a unei pagini web sau o unitate separată. Apoi, dacă vă aflați în containerul părinte va crea noi unități, după determinarea nuanța pentru imaginea ei nu vor fi văzute în aceste zone ale paginii.
Dacă aveți nevoie pentru a obține culoarea solidă de bază este translucid și după ce a văzut imaginea noastră, atunci acest lucru este folosit și RGBA modul de culoare. De exemplu, voi crea într-un document HTML două blocuri cu identificatori arbitrare.
Blocurile sunt identice între ele în toate, cu excepția fundal. Datorită poziționării absolute, ele sunt unul și același loc - în colțul din stânga sus al paginii, dar din moment ce unitatea de #ct se află într-un târziu-marcare HTML, acesta acoperă complet însoțitorul lui pe pagina vom vedea un fundal solid de culoare galbenă.
În același timp, vedem că #ab au unele imagine de fundal, dar noi nu vedem, atunci nu #ct fundal translucide, și prin ea nu a strălucit prin. Acest lucru se datorează faptului că am stabilit o culoare în modul RGB, și nu adaugă transluciditatea, pe care atât de necesară în acest caz. Să schimbăm stilul de #ct:
Am actualiza pagina și a vedea în loc de o nuanță solid galben duller, și prin ea se poate vedea stele, care au fost imaginea de fundal a blocului nostru #ab. Acesta este modul de lucru RGBA.
Acum, să luăm un alt exemplu razbrem. Scoateți una dintre blocuri, iar interiorul restul de a crea un element de copil, care atribuie, de asemenea, stilurile lor.
Centrați elementul copil, da containerului imaginea de fundal principală și culoarea dorită pentru blocul în interiorul acestuia. Din nou, din cauza absenței părintelui de fond translucid nu se va arăta prin intermediul.
Acum este suficient pentru a determina nuanța potrivită, care ar fi similar cu roz (roz), trebuie doar să-l scrie în modul RGBA, adăugați ultima transparență valoare. Override culoare de fundal pentru elementul copil:
Acum, dacă vă actualizați pagina, vom vedea că într-un bloc de culoare într-un copil poate vedea frumos ornament, care este dat pentru container comun.
În cazul în care poate fi util în construirea site-ul?
Ei bine, bun venit la transluciditatea suntem demontate, iar în cazul în care este folosit la toate? De obicei, este folosit pentru a crea așa-numitele măști în imagini diferite, elementele de meniu sau bunuri.
Cu siguranță ați văzut pe unele site-uri, cum ar fi atunci când treceți peste un element să-l să se suprapună fiecare fundal cu conținut. Dar, în același timp, în cazul în care culoarea fundalului de suprapunere setează opacitatea, imaginea anterioară, nu vom vedea. Prin urmare, acesta nu va face acest lucru, folosind o culoare translucidă, care este dat de RGBA.
Un alt exemplu poate fi utilizarea pe care o puteți vedea mai sus. În containerul principal are o imagine de fundal frumoasă. Prin urmare, pentru acest model a fost vizibil prin culoarea de fundal și elementele de copil, aceasta trebuie, de asemenea, să fie scrise în RGBA.
Dar cum să facă fundal complet transparent, în css? Anterior, am scris că puteți scrie fundal de proprietate: transparent, sau altfel specificați 0 ca a patra valoare atunci când scrieți culori în modul RGBA. O altă metodă - arde unitate cu proprietăți de opacitate o valoare de 0, dar apoi întreaga unitate va fi transparentă, adică invizibilă.
Mai multe informații puteți afla de la cursul nostru de CSS3. în cazul în care există o clasă corespunzătoare a proprietății transluciditatea și opacitate. Uita-te și învață-l pentru a înțelege mai bine aceste proprietăți. Aceasta încheie articolul și vă doresc succes în studiul tehnologiilor web. Stai webformyself, pentru a afla mai multe.
Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram
