Cum se setează culoarea transparentă în css? În acest moment, există 3 moduri de a face acest lucru.

Metoda 1 - valoarea transparentă

Dacă setați valoarea textului sau a culorii de fundal la transparent, atunci culoarea va fi complet transparentă, adică invizibilă. Exemplu:

Culoare: transparent;

Un astfel de text nu va fi vizibil pe pagină.

Metoda 2 - modul de culoare rgba

Și aceasta este deja o inovație CSS3. Anterior, nu exista un astfel de mod în dezvoltarea web, exista doar rgb. Probabil știi cum să scrii culoare în acest format. Pentru a face acest lucru, trebuie să specificați între paranteze trei valori de la 0 la 255, indicând saturația uneia dintre cele trei culori primare (roșu, verde, albastru). De exemplu:

Fundal: rgb (230, 121, 156);

Formatul rgba nu este diferit, se adaugă doar o a patra valoare - gradul de transparență al elementului de la 0 la 1. În general, acest format de notație este folosit în principal pentru a specifica o culoare semi-transparentă, nu complet transparentă. Pentru a obține o transparență deplină, trebuie doar să scrieți 0 ca a patra valoare.

Fundal: rgba (0, 0, 0, 0);

În acest caz, restul de 3 cifre nu joacă un rol special.

Culoarea semitransparentă poate fi setată dacă al patrulea parametru este setat la o valoare de la 0,01 la 0,99. Am scris deja puțin despre setarea translucidității fundalului, îl puteți citi dacă vă interesează.

Metoda 3 - opacitatea

O altă proprietate a tehnologiei css3. Dar vreau să vă avertizez imediat că funcționează puțin diferit. Opacitatea este folosită pentru a seta opacitatea întregului bloc la care este aplicată. Astfel, lizibilitatea textului și percepția imaginilor se deteriorează. Deci, văd sensul de a aplica proprietatea doar pentru blocurile în care nu există text sau alte informații. Valorile pot fi setate de la 0 la 1, așa cum este cazul celui de-al patrulea parametru la specificarea unei culori în format rgba.

În general, în acest moment, acestea sunt toate modalitățile pe care le cunosc de a seta o culoare transparentă în css. De ce este nevoie de acest lucru este o altă întrebare. Ceea ce este dedesubt poate fi văzut prin fundalul transparent. Uneori, acest lucru trebuie făcut prin proiectare. În general, tehnica cu transluciditate este foarte comună astăzi.

Fundal transparent

După cum probabil știți, fundalul este o proprietate CSS care vă permite să setați o culoare de fundal sau să încărcați o imagine pentru a acționa ca fundal.

Setați transparența pentru fundalul CSS

Deci, totul este foarte ușor datorită formatului de notație de culoare rgba. Dacă lucrați cu editori grafici, atunci probabil știți că modul de culoare rgb este descifrat astfel: proporție de roșu (roșu), proporție de verde (verde) și albastru (albastru). Deci, rgba este practic același, se mai adaugă un singur 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 specifică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 este scrisă o valoare de la 0 la unu. 1 este complet opac și 0 este 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ă și proprietatea opacității, dar se aplică întregului element ca întreg. Adică, atunci când se aplică opacitatea, transparența poate fi aplicată și textului, făcându-l imposibil de citit.

Fundal transparent, de exemplu

Avantajele unui fundal translucid sunt ușor de arătat cu un exemplu. De exemplu, avem un fundal general pentru o pagină. Iată cum ar arăta blocul dacă i s-ar oferi o culoare neagră solidă:

Acum să setăm aceeași culoare neagră pentru bloc, dar să o indicăm folosind formatul de culoare rgba, specificând ultima valoare în 0,7, de exemplu. Se dovedește așa:

Acum fundalul blocului este vizibil prin el și prin el puteți vedea imaginea de fundal. Această imagine și fundalul au doar scop ilustrativ. După cum vă puteți imagina, transparența în fundal 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.

Nu este dificil să setați culoarea în sine folosind rgba. După cum am menționat deja - primele trei litere înseamnă trei culori primare: roșu, verde și albastru, sau mai degrabă cota lor (de la 0 la 255). Prin prescrierea unor 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.

Clasa 1 Clasa 2 Clasa 3 Clasa 4 Clasa 5

Detalii Categorie: Web Designer Autor: SEO & WEB - KELL4

Creați fundal transparent în HTML și CSS (opacitate și efecte RGBA)

Efect de transluciditate elementul este clar vizibil în imaginea de fundal și a devenit larg răspândit în diferite sisteme de operare, deoarece arată elegant și frumos. Principalul lucru nu este să aveți un model monocromatic sub blocurile translucide, ci o imagine, în acest caz transparența devine vizibilă.

Acest efect este obținut într-o varietate de moduri, 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 devine necesar să se facă un fundal translucid într-un bloc, aceste metode au dezavantaje neplăcute.

Luați în considerare transluciditatea textului și a fundalului - cum să o utilizați corect în designul site-ului web:

Caracteristica principală a acestei proprietăți este că valoarea transparenței afectează toți copiii din interior, 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, transparența parțială este aplicată și obținută și prin formatul de culoare RGBA, care este setat doar pentru fundalul unui element.

De obicei, în modele, doar fundalul unui element ar trebui să fie translucid, iar textul ar trebui să fie opac pentru a menține lizibilitatea. Proprietatea opacității este nepotrivită aici deoarece textul din interiorul elementului va fi, de asemenea, parțial transparent. Cel mai bine este să utilizați formatul RGBA, din care face parte canalul alfa, sau cu alte cuvinte valoarea transparenței. Valoarea este scrisă rgba, apoi valorile componentelor de culoare roșu, albastru și verde sunt enumerate între paranteze separate prin virgulă. Ultima este transparența, care este setată de la 0 la 1, cu 0 fiind transparența completă și 1 fiind culoarea opacă pentru sintaxa rgba.

Fundal translucid HTML 5 CSS 3 IE 9

Opacitatea fundalului este setată la 90% - Fundal semi-transparent și text opac.

În această lecție, vom analiza astfel 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.

Opacitatea CSS

Valoare numerică pentru opacitate specificat în intervalul de la 0,0 la 1,0, unde zero este transparența totală și 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 extinde la toți copiii părintelui. Aceasta înseamnă că textul pe un fundal translucid va fi, de asemenea, translucid. Și acesta este deja un dezavantaj foarte semnificativ, textul nu iese atât de bine în evidență.

În captură de ecran, puteți vedea clar că textul negru a devenit la fel de translucid ca fundalul albastru.

Div (
fundal: url (imagini / imaginea ta.jpg); / * Imagine de fundal * /
latime: 750px;
înălțime: 100px;
margine: auto;
}
.albastru (
fundal: # 027av4; / * Culoare de fundal semi-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 o alternativă mai modernă la proprietate opacitate. R (roșu), G (verde), B (albastru)- înseamnă: roșu, verde, albastru. Ultima scrisoare A- înseamnă canalul alfa, care stabilește transparența. RGBA Spre deosebire de Opacitate nu afectează copiii.

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 cu RGBA:

A doua captură de ecran arată mult mai bine decât prima.

Jucându-vă cu transluciditatea fundalului blocurilor, puteți obține efecte interesante pe site. Este important ca aceste blocuri translucide să treacă peste un design variat, 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ăruia CSS3, a fost implementat exclusiv în programe de grafică.

Dacă clientul solicită ca aspectul să arate bine în versiunile mai vechi ale browserului Internet Explorer apoi adăugați proprietate filtruși nu uitați să comentați pentru ca valabilitatea codului să nu fie afectată.

Concluzie

Format RGBA sunt acceptate de toate browserele moderne, cu excepția Internet Explorer... De asemenea, este foarte important ca RGBA flexibil, actioneaza doar asupra unui anumit element specificat, fara a afecta copiii. Este clar că acest lucru este mai convenabil pentru designerul de layout. Alegerea mea este clar în favoarea formatului RGBA pentru obtinerea transparență în CSS.

Pentru o mai bună consolidare a materialului și o mai mare claritate, vă sugerez să treceți prin.

Transparența în CSS a fost o tehnică destul de la modă în ultima vreme și provoacă dificultăți în implementarea între browsere. Până acum, nu există o metodă unică pentru implementarea transparenței în toate browserele. Recent, însă, situația s-a îmbunătățit considerabil.

Acest articol aruncă o privire detaliată asupra abordărilor existente și oferă exemple de cod și explicații pentru a vă ajuta să obțineți același rezultat în toate browserele cu un efort minim.

Un alt aspect care merită menționat este că, deși transparența există de câțiva ani, nu a făcut niciodată parte din standardul CSS. Aceasta este o proprietate non-standard și ar trebui să facă parte din specificația CSS3.

Veche abordare

În versiunile mai vechi de Firefox și Safari, trebuie să aplicați proprietatea astfel:

#myElement (-khtml-opacity: .5; -moz-opacity: 0.5;)

Proprietatea -khtml-opacity a fost folosită în versiunile mai vechi ale browserelor webkit. Această proprietate este învechită și nu mai este necesară decât dacă sunteți sigur că o parte semnificativă a traficului site-ului dvs. provine de la vizitatori care folosesc Safari 1.x, ceea ce, desigur, este puțin probabil.

Următoarea linie folosește proprietatea -moz-opacity care a funcționat la versiunile foarte timpurii ale motorului Mozilla. Firefox a încetat suportul pentru acesta în versiunea 0.9.

Transparență CSS în Firefox, Safari, Chrome și Opera

Pentru majoritatea browserelor moderne, următoarea proprietate este suficientă:

#myElement (opacitate: .7;)

În exemplul de mai sus, elementul este setat la o valoare a opacității de 70% (opacitate 30%). Adică, dacă setăm valoarea la unu, atunci elementul va fi opac și, în consecință, setarea acestei valori la zero îl va face invizibil.

Proprietatea opacitate gestionează 2 cifre zecimale. Adică, valoarea „.01” va diferi de valoarea „.02”, deși nu este foarte vizibilă.

Transparență CSS pentru Internet Explorer

Ca de obicei, Internet Explorer nu este în condiții prietenoase cu alte browsere. În plus, acum avem trei versiuni ale acestui browser în utilizare destul de răspândită, setarea transparenței în fiecare dintre acestea fiind diferită și necesită uneori eforturi suplimentare pentru a obține un rezultat pozitiv.

#myElement (filtru: alfa (opacitate = 40);)

Acest exemplu folosește proprietatea filter, care funcționează în versiunile 6-8, dar există o limitare pentru versiunile 6 și 7: elementul trebuie să aibă proprietatea hasLayout setată la true. Această proprietate este prezentă numai în IE și puteți citi mai multe despre ea, de exemplu, pe Habré.

O altă modalitate de a seta transparența folosind CSS în IE8 este să utilizați următoarea abordare (rețineți comentariile):

#myElement (filtru: progid: DXImageTransform.Microsoft.Alpha (opacitate = 40); / * funcționează în IE6, IE7 și IE8 * / -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (opacitate = 40)"; / * Numai IE8 * /)

Prima linie va funcționa în toate versiunile utilizate în prezent, a doua numai în IE8. Rețineți că a doua linie folosește prefixul -ms- și valoarea este citată.

Setarea și modificarea transparenței CSS folosind JavaScript sau jQuery

Puteți utiliza următorul cod pentru a seta transparența:

Document.getElementById ("myElement"). Style.opacity = ".4"; // pentru majoritatea browserelor document.getElementById ("myElement").style.filter = "alpha (opacitate = 40)"; // pentru IE

Desigur, în acest caz este mult mai ușor să utilizați jQuery, în plus, va funcționa în toate browserele:

$ ("# myElement").css ((opacitate: .4)); // funcționează în toate browserele

Puteți anima această proprietate:

$ ("# myElement"). animate ((opacitate: .4), 1000, funcția () (// Animație completă; acest cod funcționează în toate browserele.));

Funcția RGBA

Este planificat să accepte canalul alfa în CSS3 folosind funcția rgba. Această funcție funcționează în Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+. Se foloseste astfel:

#rgba (fond: rgba (98, 135, 167, .4);)

În acest caz, ultimul parametru indică nivelul de opacitate.

Funcția HSLA

Similar cu funcția anterioară, CSS3 vă permite și să setați o culoare semi-transparentă folosind funcția HSLA, ai cărei parametri sunt Hue, Saturation, Lightness și Alpha channel.

#hsla (fond: hsla (207, 38%, 47%, .4);)

Un punct important atunci când utilizați funcțiile rgba și hsla este că setarea de opacitate nu este aplicată elementelor copil, în timp ce proprietatea de opacitate este moștenită.

Vlad Merjevici

Transparența parțială, atunci când este utilizată corect, arată foarte impresionant în designul site-ului web. Principalul lucru este că sub blocurile translucide nu există un model cu o singură culoare, ci o imagine, în acest caz, transparența devine vizibilă. Acest efect este obținut în diferite moduri și, dacă vă amintiți totul, inclusiv metodele de modă veche, atunci se folosește o imagine PNG ca fundal, creând o imagine în carouri și proprietatea opacității. Dar de îndată ce devine necesar să se facă un fundal translucid într-un bloc, aceste metode au un dezavantaj neplăcut. Voi face o mică prezentare generală, astfel încât să devină clar ce este în joc, precum și pentru acei cititori care nu sunt familiarizați cu opțiunile neconvenționale pentru crearea efectului de transluciditate.

PNG ca fundal

Un desen semitransparent monocolor este pregătit preliminar într-un editor grafic, care este salvat în format PNG-24 (Fig. 1). O caracteristică a acestui format este suportul pentru 256 de niveluri de transparență sau, pur și simplu, poate afișa imagini translucide.

Orez. 1. Imagine pentru crearea fundalului

Apoi adăugăm imaginea ca fundal prin proprietatea de fundal, așa cum se arată în exemplul 1.

Exemplul 1. Folosind un model translucid

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Rezultatul acestui exemplu este prezentat în Fig. 3.

Orez. 2. Aplicarea unui tapet

Browserul învechit Internet Explorer 6 nu funcționează cu transluciditate în PNG-24, dacă din anumite motive este necesar să suportați acest browser, va trebui să utilizați scripturi pentru acesta.

Această metodă are o serie de limitări. Deci, atunci când dezactivați imaginile din browser, fundalul va dispărea cu totul. În plus, nu este atât de ușor să schimbați culoarea fundalului și valoarea transparenței, pentru aceasta va trebui să editați din nou imaginea.

Imagine în carouri

Această metodă aparține modalităților foarte străvechi de implementare a translucidității, când browserele „nu puteau face nimic” și trebuiau să caute soluții neconvenționale. Trucul este de a crea o imagine care alternează între pixeli transparenți și opaci (Figura 3). Această structură regulată creează un efect translucid, imitându-l în esență.

Orez. 3. Model în carouri mărit

Așa arată până la urmă (Fig. 4).

Orez. 4. Simularea translucidității

Dezavantajele acestei metode sunt comparabile cu cea anterioară; poate apărea și un model moiré și textul se deteriorează.

Proprietatea opacității

Proprietatea opacitate CSS 3 stabilește valoarea opacității și variază de la 0 la 1, unde zero este transparența completă a elementului și unul este opac. Proprietatea de opacitate are o caracteristică specială - transparența este extinsă la toți copiii, iar aceștia nu pot depăși valoarea de transparență a părintelui lor. Se pare că nu poate exista text opac pe un fundal translucid (exemplul 2).

Exemplul 2. Utilizarea opacității

XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx

Rezultatul exemplului este prezentat în Fig. 5.

Orez. 5. Translucidența textului și a fundalului

În Internet Explorer până la 8.0 inclusiv, opacitatea nu funcționează, așa că folosește proprietatea de filtru specifică browserului. Desigur, duce la CSS nevalid.

RGBA

Abordarea modernă este mult mai simplă și mai clară decât metodele de mai sus și constă în utilizarea formatului RGBA pentru culoare și fundal. Primele trei litere sunt familiare pentru mulți și reprezintă roșu, verde, albastru (roșu, verde, albastru), ultimele simbolizează canalul alfa și stabilesc transparența elementului. Formatul de înregistrare este următorul.

culoare de fundal: rgba (r, g, b, a);

Valoarea componentei de culoare este pusă între paranteze în loc de litere, poate fi vizualizată în orice editor grafic, ultima valoare setează transparența și coincide cu valoarea proprietății opacității.

Nu toate browserele acceptă acest format: Internet Explorer de la versiunea 9, Opera de la versiunea 10, Firefox de la 3, Safari de la 3.2. Dar, în general, browserele moderne redau transparența corect. Pentru versiunile mai vechi de IE, puteți specifica separat culoarea în formatul obișnuit, în timp ce, desigur, nu va exista transparență. Sau, din nou, utilizați proprietatea filtru, dar apoi trebuie să suportați și transparența textului (exemplul 3). Pentru a menține CSS valid, am folosit comentarii condiționate.

Exemplul 3. Utilizarea RGBA

HTML5 CSS3 IE Cr Op Sa Fx

Rezultatul exemplului poate fi văzut în fig. 6.

Orez. 6. Fundal semi-transparent cu text opac

Comparați poza cu cea anterioară, literele sunt mai luminoase și mai clare.

În Internet Explorer 7, a fost găsită o eroare la combinarea culorii de fundal cu valori diferite. De exemplu, dacă setați culoarea de fundal la roșu, așa cum se arată mai jos, atunci fundalul în IE7 nu se va afișa deloc.

Div (culoare de fundal: roșu; / * Nu se aplică în IE7 * / culoare de fundal: rgba (255, 0, 0, 0,5);)

Acest lucru este rezolvat prin înlocuirea proprietății background-color cu fundal.

Div (fond: roșu; / * Și aceasta funcționează * / fundal: rgba (255, 0, 0, 0,5);) Cu toate acestea, există o avertizare. Validatorul CSS „înjură” în fundal dacă i se dă o valoare în format RGBA. Dar, în același timp, se referă corect la culoarea de fundal. În general, ca întotdeauna, trebuie să alegeți între browsere și valabilitate.