Valorile în care intervalul acceptă proprietatea opacității. Cum se face un strat semi-transparent? Diferențele dintre opacitate și rgba
proprietate CSS opacitate stabilește opacitatea elementului. Opacitatea este gradul în care conținutul este ascuns în spatele unui element și este opusul transparenței.
Sursa pentru acest exemplu interactiv este stocată într-un depozit GitHub. Dacă doriți să contribui la proiectul de exemple interactive, clonează https://github.com/mdn/interactive-examples și trimite-ne o cerere de extragere.
opacitatea se aplică elementului ca întreg, inclusiv conținutului său, chiar dacă valoarea nu este moștenită de elementele copil. În acest fel, elementul și copiii săi au aceeași opacitate față de fundalul elementului, chiar dacă au opacitate diferită unul față de celălalt.
Utilizarea opacității cu o altă valoare decât 1 plasează elementul într-un nou context de suprapunere.
Exemple
Exemplu de bază
div ( culoarea fundalului: galben; ) .light ( opacitate: 0,2; /* Text abia vizibil pe fundal */ ) .mediu ( opacitate: 0,5; /* Vizibilitatea textului este mai clară pe fundal */ ) .grea ( opacitate : 0,9 /* Vizibilitatea textului este foarte clară pe fundal */ )Opacitate diferită cu:hover
img.opacity ( opacitate: 1; filtru: alpha(opacity=100); /* IE8 și mai jos */ zoom: 1; /* „hasLayout” declanșează în IE 7 și mai jos */ ) img.opacity:hover ( opacitate: 0..png" alt="Sigla MDN" width="128" height="146" class="opacity"> !}Probleme de accesibilitate
Dacă opacitatea textului este ajustată, este important să vă asigurați că raportul de contrast dintre culoarea textului și fundalul pe care este plasat textul este suficient de mare pentru ca persoanele cu vedere slabă să poată citi conținutul paginii.
Raportul de contrast al culorii este determinat prin compararea luminozității textului cu opacitatea ajustată și valoarea culorii de fundal. Pentru a respecta orientările actuale privind accesibilitatea conținutului web (WCAG), conținutul text necesită un raport de 4,5:1 și 3:1 pentru text mai mare, cum ar fi titlurile. Textul mare este definit ca 18,66 px sau mai mare sau 24 px sau mai mare.
Specificații
| Valoarea inițială | 1.0 |
|---|---|
| Se aplică la | toate elementele |
| Moştenit | Nu |
| Afişa | vizual |
| Prelucrarea valorii | valoarea specificată este tăiată la interval |
| Tip de animație | sunt interpolate ca numere reale în virgulă mobilă.">număr |
| Ordine canonică | ordine unică ambiguă definită de gramatica formală |
Suport pentru browser
Tabelul de compatibilitate de pe această pagină este generat din date structurate. Dacă doriți să contribuiți la date, vă rugăm să consultați https://github.com/mdn/browser-compat-data și să ne trimiteți o cerere de extragere.
Actualizați datele de compatibilitate pe GitHub
| Calculatoare | Mobil | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Margine | Firefox | Internet Explorer | Operă | Safari | Vizualizare web Android | Chrome pentru Android | Firefox pentru Android | Opera pentru Android | Safari pe iOS | Samsung Internet | |
| opacitate | Chrome Sprijin deplin 1 | Margine Sprijin deplin 12 | Firefox Sprijin deplin
1 Sprijin deplin 1 Fără suport 1 - 3.5 Cu prefix Cu prefix Necesită prefixul furnizorului: -moz- | I.E. Sprijin deplin 9 | Operă Sprijin deplin 9 | Safari Sprijin deplin
2 Sprijin deplin 2 Fără suport 1.1 - 2 Cu prefix Cu prefix Necesită prefixul furnizorului: -khtml- | WebView Android Sprijin deplin 1 | Chrome Android Sprijin deplin 18 | Firefox Android Sprijin deplin 4 | Opera Android Sprijin deplin 10.1 | Safari iOS Sprijin deplin 1 | Samsung Internet Android Sprijin deplin Da |
| Suport pentru valori procentuale de opacitate | Chrome Sprijin deplin 78 | Edge Fără suport Nr | Firefox Sprijin deplin 70 | IE Fără suport Nr | Opera Fără suport Nr | Safari Fără suport Nr | WebView Android Sprijin deplin 78 | Chrome Android Sprijin deplin 78 | Firefox Android Fără suport Nr | Opera Android Fără suport Nr | Safari iOS Fără suport Nr | Samsung Internet Android Fără suport Nr |
Legendă
Sprijin deplin Sprijin deplin Fără suport Fără suport Necesită un prefix de furnizor sau alt nume de utilizat. Necesită un prefix de furnizor sau alt nume de utilizat.În această lecție ne vom uita la așa ceva CSS proprietati - opacitateŞi RGBA. Proprietate Opacitate este responsabil doar pentru transparența elementelor și a funcției RGBA– pentru culoare și transparență, dacă specificați valoarea transparenței canalului alfa.
Transparență CSS Opacitate
Valoare digitală pentru opacitate stabilit în intervalul de la 0,0 la 1,0, unde zero este transparența completă, iar unu, dimpotrivă, este opacitatea absolută. De exemplu, pentru a vedea 50% transparență, trebuie să setați valoarea la 0,5. Trebuie avut în vedere faptul că opacitate se propagă la toate elementele copil ale părintelui. Aceasta înseamnă că textul pe un fundal translucid va fi, de asemenea, translucid. Și acesta este un dezavantaj foarte semnificativ; textul nu iese atât de bine în evidență.
Transparență prin CSS Opacity
Captura de ecran arată clar că textul negru a devenit la fel de translucid ca fundalul albastru.
Div (
fundal: url(images/yourimage.jpg); /* Imagine de fundal */
latime: 750px;
înălțime: 100px;
margine: auto;
}
.albastru (
fundal: #027av4; /* Culoare podea fundal transparent */
opacitate: 0,3; /* Valoarea translucidității fundalului */
înălțime: 70px;
}
h1 (
umplutură: 6px;
familie de fonturi: Arial Black;
font-weight: îndrăzneț;
dimensiunea fontului: 50px;
}
Transparență CSS în format RGBA
Format pentru înregistrarea culorii RGBA, este mai mult alternativă modernă pentru proprietate opacitate. R (roșu), G (verde), B (albastru)- înseamnă: roșu, verde, albastru. Ultima scrisoare O– înseamnă canal alfa, care stabilește transparența. RGBA spre deosebire de Opacitate nu afectează elementele copil.
Acum să ne uităm la exemplul nostru de utilizare RGBA. Să înlocuim aceste linii în stiluri.
Fundal: ##027av4; /* Culoare de fundal */
opacitate: 0,3; /* valoarea translucidității fundalului */
la următoarea linie
Fundal: rgba(2, 127, 212, 0,3);
După cum puteți vedea, valoarea transparenței de 0,3 este aceeași pentru ambele metode.
Rezultatul exemplului RGBA:
A doua captură de ecran arată mult mai bine decât prima.
Jucându-vă cu transluciditatea fundalului blocurilor, puteți realiza pe site efecte interesante. Este important ca aceste blocuri translucide să meargă peste un design colorat, cum ar fi o fotografie. Numai în acest caz efectul va fi vizibil. Această tehnică a fost folosită de mult în design, chiar înainte de apariția oricărei CSS3, a fost implementat pur în programe grafice.
Dacă clientul solicită ca aspectul să arate bine în versiunile mai vechi ale browserului Internet Explorer, apoi adăugați proprietatea filtrași nu uitați să comentați pentru ca valabilitatea codului să nu fie afectată.
Concluzie
Format RGBA acceptă toate browserele moderne, cu excepția Internet Explorer. De asemenea, este foarte important ca RGBA flexibil, acționează doar asupra unui anumit element specificat, fără a-și afecta copiii. Este clar că acest lucru este mai convenabil pentru designerul de layout. Alegerea mea este cu siguranță în favoarea formatului RGBA a primi transparență în CSS.
Pentru o mai bună consolidare a materialului și o mai mare claritate, vă sugerez să treceți prin.
Crearea unui fundal transparent în HTML și CSS (opacitate și efecte RGBA)
Efect translucid elementul este clar vizibil în imaginea de fundal și a devenit larg răspândit în diferite sisteme de operare pentru că arată elegant și frumos. Principalul lucru este să nu aveți un design monocromatic sub blocurile translucide, ci o imagine, în acest caz, transparența devine vizibilă.
Acest efect este atins în moduri diferite, inclusiv tehnici de modă veche, cum ar fi utilizarea unei imagini PNG ca fundal, crearea unei imagini în carouri și proprietatea opacității. Dar de îndată ce apare nevoia de a face un fundal translucid într-un bloc, aceste metode au dezavantaje neplăcute.
Să ne uităm la transluciditatea textului și a fundalului - cum să o folosiți corect în designul site-ului web:
Caracteristica principală a acestei proprietăți este că valoarea transparenței afectează toate elementele copil din ea, nu doar fundalul. Aceasta înseamnă că atât fundalul, cât și textul vor deveni translucide. Puteți crește nivelul de transparență prin schimbarea comenzii de opacitate de la 0,1 la 1.
HTML 5 CSS 3 IE 9
În designul web, se folosește și transparența parțială și se realizează prin formatul de culoare RGBA, care este setat doar pentru fundalul elementului.
De obicei, într-un design, doar fundalul unui element ar trebui să fie translucid, iar textul ar trebui să fie opac pentru a menține lizibilitatea. Proprietatea opacitate nu este potrivită aici deoarece textul din interiorul elementului va fi, de asemenea, parțial transparent. Cel mai bine este să utilizați formatul RGBA, care are un canal alfa, sau cu alte cuvinte, o valoare de transparență, ca parte a acestuia. Valoarea este scrisă rgba, apoi valorile componentelor de culoare roșu, albastru și verde sunt enumerate în paranteze, separate prin virgule. Ultima este transparența, care este setată de la 0 la 1, cu 0 însemnând transparență completă și 1 opacitate de culoare - sintaxa pentru utilizarea rgba.
Fundal translucid HTML 5 CSS 3 IE 9
O zi bună, tociști în dezvoltare web, precum și începători. Pentru cei care nu urmăresc tendințele IT, sau mai degrabă moda web, aș dori să vă informez solemn că această publicație pe tema: „Cum să faceți un bloc transparent cu instrumente css” este potrivită pentru dvs. Î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 metode existente creând transparență, pornind de la soluții antediluviane, mă voi concentra pe compatibilitatea soluțiilor cu browsere și, de asemenea, voi da exemple specifice codul programului. Acum să trecem la treabă!
Metoda 1. Antediluvian
Când erau încă acolo calculatoare slabe iar „abilitățile” nu sunt 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 la dimensiunea normală semăna cu un fel de transparență.
În opinia mea, această „cârjă” ajută cu siguranță în versiunile mai vechi ale browserelor în care soluțiile moderne nu funcționează. Dar este de remarcat faptul că calitatea afișajului textului , înscris în astfel, cade brusc.
Metoda 2. Nu deranjat
În cazuri rare, dezvoltatorii rezolvă problema introducerii unei imagini translucide inserând... o imagine translucidă gata făcută! În acest scop, sunt folosite imaginile salvate în format PNG-24. Dat 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 codul de script;
- Nu puteți schimba culorile de fundal în css;
- Dacă funcția de afișare a imaginii a browserului este dezactivată, aceasta va dispărea.
Metoda 3. Promovată
Cea mai comună și toată lumea metoda cunoscuta a face unele blocuri transparente este o proprietate opacitate.
Valoarea parametrului variază în intervalul , unde la 0 obiectul este invizibil, iar la 1 este complet vizibil. Cu toate acestea, există și câteva momente neplăcute aici.
În primul rând, toate elementele copil moștenesc transparență. Aceasta înseamnă că textul introdus va „străluci” împreună cu fundalul.
În al doilea rând, Internet Explorer „reduce din nou nasul” și, până la versiunea 8, nu funcționează cu opacitate.
Pentru a rezolva această problemă, utilizați filtra:alfa (Opacitate=valoare).
Să ne uităm la 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).
Anterior, v-am spus că RGB este unul dintre modelele de culoare populare, unde R este responsabil pentru toate nuanțele de roșu, G pentru nuanțele de verde și B pentru nuanțele de albastru.
În cazul parametrului css, variabila A este responsabilă pentru canalul alfa, care, la rândul său, este responsabil pentru transparență.
Avantajul principal ultima metoda– canalul alfa nu afectează obiectele situate în interiorul blocului stilizat.
rgba(r, g, b, a) este suportat începând de la:
- 10 versiuni de Opera;
- Internet Explorer 9;
- Safari 3.2;
- 3 versiuni de Firefox.
vreau sa notez fapt interesant! Îndrăgitul Internet Explorer 7 aruncă o eroare la combinarea proprietăților 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%.
Aceasta încheie publicația. Abonați-vă la blogul meu și nu uitați să invitați prietenii. Vă doresc mult succes în învățarea limbilor web! Pa! Pa!
Pentru a crea un efect transparent în CSS, se folosește proprietatea opacitate.
IE8 și versiunile anterioare acceptă o proprietate alternativă - filter:alpha(opacity=x) , unde " x " poate varia de la 0 la 100 , cu cât valoarea este mai mică, cu atât elementul va fi mai transparent.
Toate celelalte browsere acceptă opacitatea proprietății CSS standard, care poate lua un număr de la 0,0 la 1,0 ca valoare, cu cât valoarea este mai mică, cu atât elementul va fi mai transparent:
Încercați »Transparență la hover
Pseudo-clasă:hover vă permite să schimbați aspect elemente când treceți cursorul mouse-ului peste ele. Vom folosi această funcție pentru a face ca imaginea să-și piardă transparența atunci când trece cu mouse-ul peste:
Încercați »Transparența fundalului
Sunt două moduri posibile face elementul transparent: proprietatea de opacitate descrisă mai sus și specificând culoarea de fundal în format 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) - sistem de culoare, care determină nuanța amestecând 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 folosind RGB vor diferi de valori hexazecimale, pe care le-am folosit înainte prin faptul că permit utilizarea unui canal de transparență alfa. Aceasta înseamnă că prin fundalul unui element cu transparență alfa, ceea ce se află sub acesta va fi vizibil.
Declararea unei culori RGBA este similară ca sintaxă cu regulile RGB standard. Cu toate acestea, va trebui, de asemenea, să declarăm valoarea ca RGBA (în loc de RGB) și să specificăm o valoare suplimentară de transparență zecimală 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 proprietatea RGBA este că proprietatea de opacitate aplică transparență întregului element, ceea ce înseamnă că întregul conținut al elementului devine transparent. Și RGBA vă permite să setați transparența părților individuale ale unui element (de exemplu, doar textul sau fundalul):
Corp ( imagine de fundal: url(img.jpg); ) .prim1 ( lățime: 400px; margine: 30px 50px; culoarea fundalului: #ffffff; chenar: 1px negru solid; greutate font: bold; opacitate: 0,5; filtru : alpha(opacity=70); /*pentru IE8 și anterioare*/ text-align: center .prim2 ( width: 400px; margin: 30px 50px; background-color: rgba(255,255,255,0.5); margine: 1px solid black; ; font-weight: bold text-align: center ) Încercați »
Notă: valorile RGBA nu sunt acceptate în IE8 și mai sus versiuni anterioare. Pentru a declara o culoare de rezervă pentru browserele mai vechi care nu acceptă valori de culoare alfa, ar trebui să o specificați mai întâi înainte de valoarea RGBA: background: rgb(255,255,0); fundal: rgba(255,255,0,0.5);