O zi bună, tociști în dezvoltare web, precum și începătorii săi. Pentru cei care nu urmăresc tendințele din domeniul IT, sau mai degrabă moda web, vreau să vă anunț solemn că această publicație pe tema: „Cum să faceți un bloc css transparent cu instrumente” este doar calea pentru voi. Într-adevăr, în actualul 2016, introducerea diferitelor obiecte transparente în serviciile online este considerată o mișcare elegantă.
Prin urmare, în acest articol vă voi spune despre toate metodele existente pentru a crea transparență, pornind de la soluții antediluviane, concentrându-vă pe compatibilitatea soluțiilor cu browsere și, de asemenea, voi da exemple specifice de cod de program. Și acum la muncă!
Metoda 1. Antediluvian
Când încă erau computere slabe și „abilitățile” nu erau dezvoltate, dezvoltatorii au venit cu propriul mod de a crea un fundal transparent: folosind pixeli transparenți la rândul lor cu cei colorați. Blocul creat în acest fel arăta ca o tablă de șah la scară, dar în dimensiune normală semăna cu un fel de transparență.
Această „cârjă”, după părerea mea, ajută bineînțeles în versiunile mai vechi ale browserelor în care soluțiile moderne nu funcționează. Dar este de remarcat faptul că calitatea afișării textului , înscris în astfel de , cade brusc.
Metoda 2. Nu confuz
În cazuri rare, dezvoltatorii rezolvă problema cu introducerea unei imagini translucide inserând... o imagine translucidă deja terminată! Pentru aceasta se folosesc imaginile salvate în format PNG-24. Acest format grafic vă permite să setați 256 de niveluri de transluciditate.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
Cu toate acestea, această metodă nu este convenabilă din mai multe motive:
- Internet Explorer 6 nu funcționează cu această tehnologie, trebuie să scrieți cod de script pentru ea;
- Nu puteți schimba culorile de fundal în css;
- Dacă funcția de afișare a imaginii este dezactivată în browser, aceasta va dispărea.
Metoda 3. Promovată
Cel mai comun și cunoscut mod de a face un bloc transparent este proprietatea opacitate.
Valoarea parametrului variază în intervalul , unde la 0 obiectul este invizibil, iar la 1 este complet afișat. Totuși, aici sunt câteva momente neplăcute.
În primul rând, toate elementele copil moștenesc transparență. Și asta înseamnă că și textul înscris va „străluci” împreună cu fundalul.
În al doilea rând, Internet Explorer scoate din nou nasul și până la versiunea 8 nu funcționează opacitate.
Pentru a rezolva această problemă, utilizați filtru:alfa (Opacitate=valoare).
Luați în considerare un exemplu.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
Metoda 4. Modern
Astăzi, profesioniștii folosesc instrumentul rgba (r, g, b, a).
Înainte de asta, am spus că RGB este unul dintre modelele de culoare populare, unde R este responsabil pentru toate nuanțele de roșu, G - nuanțe de verde și B - nuanțe de albastru.
În cazul parametrului css, variabila A este responsabilă pentru canalul alfa, care la rândul său este responsabil pentru transparență.
Principalul avantaj al acestei din urmă metode este că canalul alfa nu afectează obiectele din interiorul blocului stilizat.
rgba (r, g, b, a) este acceptat deoarece:
- 10 versiuni de Opera;
- Internet Explorer 9;
- Safari 3.2;
- 3 versiuni de Firefox.
Vreau să notez un fapt interesant! Iubitul Internet Explorer 7 aruncă o eroare la combinarea unei proprietăți culoare de fundal cu denumirea culorilor (culoare-fond: auriu). Prin urmare, ar trebui să utilizați numai:
culoare de fundal: rgba(255, 215, 0, 0,15)
Și acum un exemplu.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
In magazinul nostru vei gasi tot felul de flori.
|
Rețineți că conținutul text al blocului este complet vizibil (100% negru), în timp ce fundalul este setat la un canal alfa de 0,88, adică. 88%.
Acest post a ajuns la final. Abonați-vă la blogul meu și nu uitați să vă invitați prietenii. Succes la învățarea limbilor web! Pa! Pa!
Descriere
Specifică culoarea de fundal a unui element. Deși această proprietate nu moștenește proprietăți de la părinte, deoarece valoarea inițială este setată la transparent, culoarea de fundal a elementelor copil este aceeași cu culoarea de fundal a elementului părinte.
Sintaxă
culoare de fundal:<цвет>| transparent | moşteni
Valori
transparent Setează un fundal transparent. inherit Moștenește valoarea părintelui.HTML5 CSS2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Acest exemplu folosește trei moduri diferite de a seta culoarea de fundal pentru elementele paginii web. Rezultatul exemplului este prezentat în Fig. unu.
Orez. 1. Aplicați culoarea de fundal
Model de obiect
document.getElementById("elementID").style.backgroundColor
Browsere
Internet Explorer până la versiunea 7.0 nu acceptă valoarea de moștenire.
Nu există o modalitate directă de a seta transparența unei imagini de fundal (cel puțin pentru 2016) prin CSS (inclusiv CSS 3). Există multe soluții pentru această problemă.
Amestecarea fundalurilor
Cea mai simplă soluție este să amestecați cele două fundaluri (o imagine și o culoare translucidă). Această metodă este potrivită dacă există un fundal de același tip sub „imaginea de fundal transparentă”. aceasta nu este deloc transparență, ci imitația ei prin amestecarea imaginii cu culoarea. Setați un fundal dublu format dintr-o imagine de fundal și culoarea dorită cu un canal alfa. După aceea, alegeți cel mai potrivit mod de amestecare și ajustați compoziția cu canalul alfa al culorii la rezultatul dorit.
Fundal: url("/images/img1.jpg"), rgba(255,255,255,0.9); modul de amestec de fundal: culoare;
Adăugarea unui pseudo element
Cel mai bun mod de a obține ceea ce îți dorești. Creăm un pseudo-element folosind pseudo-clasa after. Disponibil
#principal (poziția: relativă; ) #principal:după (conținut: ""; afișare: bloc; poziție: absolut; sus: 0; stânga: 0; imagine de fundal: url(/wp-content/uploads/2010/11 /tandem.jpg); lățime: 100%; înălțime: 100%; opacitate: 0,2; z-index: -1; )
Salutare tuturor. După cum probabil știți, fundalul este o proprietate CSS care vă permite să setați culoarea de fundal sau să încărcați o imagine pentru a acționa ca fundal. CSS3 a introdus și capacitatea de a crea gradienți liniari și radiali, dar acesta este un subiect pentru un articol separat. În același, am vrut să vă spun cum să setați transparența pentru proprietatea de fundal în css.
Setați transparența pentru fundal CSS
Deci, toate acestea se realizează foarte simplu datorită unui astfel de format de înregistrare color precum rgba . Dacă lucrați cu editori grafici, probabil știți că modul de culoare rgb este decodat astfel: proporția de roșu (roșu), proporția de verde (verde) și albastru (albastru). Deci, rgba este aproape la fel, este adăugat doar un parametru - transparența. Este scris astfel:
Culoare de fundal: rgba(173, 57, 22, 0,5)
În primul rând, indicăm în mod explicit că setăm culoarea în modul rgba. Apoi indicăm valorile de saturație ale celor trei culori primare de la 0 la 255, unde 255 este cea mai mare saturație. Al patrulea parametru este transparența noastră. Aici valoarea este scrisă de la 0 la unu. 1 este un element complet opac, iar 0 este un element complet transparent. În consecință, dacă îl setați la 0, atunci culoarea de fundal nu va fi vizibilă deloc.
Acum știți cum să setați transparența pentru proprietatea de fundal în css. Pentru a face acest lucru, trebuie să utilizați modul de culoare rgba. Există, de asemenea, o proprietate de opacitate, dar se aplică întregului element ca întreg. Adică, atunci când se aplică opacitatea, transparența poate fi aplicată și textului, ceea ce îl va face ilizibil.
Exemplu de fundal transparent
Beneficiile unui fundal translucid sunt ușor de arătat cu un exemplu. De exemplu, avem un fundal general al paginii. Iată cum ar arăta blocul dacă i s-ar oferi o culoare neagră solidă:
Și acum să setăm aceeași culoare neagră pentru bloc, dar să o specificăm folosind formatul de culoare rgba, specificând ultima valoare ca 0,7, de exemplu. Se va dovedi astfel:
Acum fundalul blocului este translucid și imaginea de fundal este vizibilă prin el. Această imagine și fundalul au doar scop ilustrativ. După cum înțelegeți, transparența de fundal în CSS poate fi utilă atunci când aveți nevoie de fundalul unui element imbricat pentru a se afișa fără a ascunde alte fundaluri situate în alte straturi.
Culoarea în sine nu este dificil de setat folosind rgba. După cum am menționat deja, primele trei litere înseamnă cele trei culori primare: roșu, verde și albastru, sau mai degrabă cota lor (de la 0 la 255). Introducând valori diferite, puteți obține milioane de culori diferite, iar transluciditatea vă va permite să veniți cu o mulțime de efecte frumoase pentru site, dacă este necesar.
CSS folosește proprietatea opacitate pentru a crea un efect transparent.
IE8 și versiunile anterioare acceptă o proprietate alternativă - filter:alpha(opacity=x) , unde " x " poate lua o valoare de la 0 la 100 , cu cât valoarea este mai mică, cu atât elementul va fi mai transparent.
Toate celelalte browsere acceptă proprietatea standard de opacitate CSS, care poate lua o valoare între 0.0 și 1.0 , cu cât valoarea este mai mică, cu atât elementul va fi mai transparent:
Încerca "Transparența cursorului
Pseudoclasa :hover vă permite să schimbați aspectul elementelor atunci când treceți cu mouse-ul peste ele. Vom folosi această funcție pentru a face ca imaginea să-și piardă transparența la trecerea cu mouse-ul:
Încerca "Transparența fundalului
Există două moduri posibile de a face un element transparent: proprietatea de opacitate descrisă mai sus și specificarea unei culori de fundal RGBA.
Este posibil să fiți deja familiarizați cu modelul de reprezentare a culorilor RGB. RGB (Roșu, Verde, Albastru - roșu, verde, albastru) - un sistem de culori care determină nuanța prin amestecarea roșu, verde și albastru. De exemplu, pentru a seta culoarea textului la galben, puteți utiliza oricare dintre următoarele declarații:
Culoare: rgb(255,255,0); culoare: rgb(100%,100%,0);
Culorile specificate cu RGB vor diferi de valorile hexadecimale pe care le-am folosit anterior prin faptul că permit utilizarea unui canal alfa pentru transparență. Aceasta înseamnă că ceea ce este dedesubt va apărea prin fundalul unui element cu transparență alfa.
Declarația de culoare RGBA este similară ca sintaxă cu regulile standard RGB. Cu toate acestea, printre altele, trebuie să declarăm valoarea ca RGBA (în loc de RGB) și să setăm o valoare suplimentară a transparenței zecimale după valoarea culorii între 0,0 (complet transparent) și 1 (complet opac).
Culoare: rgba(255,255,0,0.5); culoare: rgba(100%,100%,0,0.5);
Diferența dintre proprietatea de opacitate și RGBA este că proprietatea de opacitate aplică transparență întregului element, adică întregul conținut al elementului devine transparent. Și RGBA vă permite să setați transparența pentru părți individuale ale unui element (de exemplu, doar text sau fundal):
Corp ( imagine de fundal: url(img.jpg); ) .prim1 ( lățime: 400px; marjă: 30px 50px; culoarea fundalului: #ffffff; chenar: 1px negru solid; greutate font: bold; opacitate: 0,5; filtru : alpha(opacity=70); /*pentru IE8 și versiuni anterioare*/ text-align: center; ) .prim2 ( lățime: 400px; margine: 30px 50px; background-color: rgba(255,255,255,0.5); chenar: 1px solid negru; greutate font: bold; text-align: center; ) Încercați »
Notă: valorile RGBA nu sunt acceptate în IE8 și anterioare. Pentru a declara o rezervă de culoare pentru browserele mai vechi care nu acceptă valori de culoare cu canale alfa, specificați-o mai întâi înainte de valoarea RGBA: background: rgb(255,255,0); fundal: rgba(255,255,0,0.5);
