Modalități de a crea fundaluri transparente. Culoare și fundal transparente în CSS

/* 06.07.2006 */

Efectul de transparență este subiectul acestui articol. Dacă sunteți interesat să învățați cum să faceți transparente elementele paginii HTML folosind CSS sau Javascript și cum să obțineți compatibilitatea între browsere (aceeași experiență în browsere diferite) ținând cont de browserele Firefox, Internet Explorer, Opera, Safari, Konqueror, atunci sunt binevenite. În plus, să ne uităm la o soluție gata făcută pentru schimbarea treptată a transparenței folosind javascript.

Prin simbioză mă refer la combinarea diferitelor stiluri pentru diferite browsere într-o singură regulă CSS pentru a obține efectul dorit, de exemplu. pentru a implementa compatibilitatea între browsere.

Filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5,5+*/ -moz-opacitate: 0,5; /* Mozilla 1.6 și mai jos */ -khtml-opacity: 0,5; /* Konqueror 3.1, Safari 1.1 */ /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */

De fapt, sunt necesare primele și ultimele reguli, pentru IE5.5+ și browsere care înțeleg opacitatea CSS3, iar cele două reguli din mijloc evident nu fac diferența, dar nici nu prea interferează (decideți singuri indiferent dacă ai nevoie de ele).

Acum să încercăm să setăm transparența printr-un script, ținând cont de caracteristicile diferitelor browsere descrise mai sus.

Funcția setElementOpacity(sElemId, nOpacity) ( var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId); if (!elem || !opacityProp) return; // Dacă nu există niciun element cu id-ul specificat sau browserul nu acceptă nici una dintre metodele cunoscute pentru controlul transparenței dacă (opacityProp=="filtru") // Internet Exploder 5.5+ ( nOpacity *= 100; // Dacă transparența este deja setată, atunci schimbați-o prin colecția de filtre, în caz contrar adăugați transparență prin style.filter var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; DXImageTransform.Microsoft.Alpha(opacity ="+nOpacity+")"; // Pentru a nu suprascrie alte filtre, folosiți "+=" ) else // Alte browsere elem.style = nOpacity; ) function getOpacityProperty() ( if ( typeof document.body.style.opacity == "șir") // Conform CSS3 (Moz 1.7+, Safari 1.2+, Opera 9) returnează „opacitate”;

else if (typeof document.body.style.MozOpacity == „șir”) // Mozilla 1.6 și versiunile anterioare, Firefox 0.8 returnează „MozOpacity”;

else if (typeof document.body.style.KhtmlOpacity == "șir") // Konqueror 3.1, Safari 1.1 returnează "KhtmlOpacity";

else if (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)>=5.5) // Internet Exploder 5.5+ returnează „filtru”;

S-ar putea întreba de ce nu setați transparența atribuind (=) proprietății elem.style.filter = "..."; ? De ce se folosește „+=" pentru a adăuga proprietatea de filtru la sfârșitul șirului? Răspunsul este simplu, pentru a nu „suprascrie” alte filtre. Dar, în același timp, dacă adăugați un filtru în acest fel a doua oară, acesta nu va modifica valorile setate anterior ale acestui filtru, ci va fi pur și simplu adăugat la sfârșitul liniei de proprietate, ceea ce nu este corect. Prin urmare, dacă un filtru este deja instalat, atunci trebuie să îl manipulați prin colecția de filtre aplicate elementului: elem.filters (dar rețineți că dacă filtrul nu a fost încă atribuit elementului, atunci este imposibil să-l gestioneze prin această colecție). Elementele colecției pot fi accesate fie prin numele filtrului, fie prin index. Cu toate acestea, filtrul poate fi specificat în două stiluri, stilul scurt IE4 sau stilul IE5.5+, care este luat în considerare în cod.

Soluție gata. Folosim biblioteca opacity.js

img ( filter:alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacitatea: 0.3; ) // Creați o regulă pentru modificarea transparenței: setați numele regulii, începe și sfârșit transparența, ca precum și un parametru opțional întârzieri care afectează viteza de schimbare a transparenței fadeOpacity.addRule("oR1", .3, 1, 30); fadeOpacity(this.id, "oR1") " onmouseout="fadeOpacity.back(this.id) " src="/img/strawberry.jpg" width="100" height="80" /> fadeOpacity(this.id, "oR1") " onmouseout="fadeOpacity.back(this.id) " src="/img/tomato.jpg" width="82" height="100" /> fadeOpacity(this.id, "oR1") " onmouseout="fadeOpacity.back(this.id) " src="/img/sweet_cherry.jpg" width="98" height="97" />

Cum se conectează biblioteca, cred, poate fi văzut din exemplul de mai sus. Acum merită să explicăm definiția regulilor. Înainte de a apela metodele pentru schimbarea fără probleme a transparenței, trebuie să definiți regulile după care va fi efectuat procesul: trebuie să determinați transparența inițială și finală și, de asemenea, dacă doriți, să specificați un parametru de întârziere care afectează viteza procesului. de schimbare a transparenţei.

Regulile sunt definite folosind metoda fadeOpacity.addRule

Sintaxă: fadeOpacity.addRule(sRuleName, nStartOpacity, nFinishOpacity, nDalay)

Argumente:

• sRuleName - numele regulii, setat arbitrar;
• nStartOpacity și nFinishOpacity - începe și finalizează transparența, numere în intervalul de la 0,0 la 1,0;
• nDelay - întârziere în milisecunde (argument opțional, implicit este 30).

Apelul la estomparea transparenței în sine se face prin metodele fadeOpacity(sElemId, sRuleName), unde sElemId este id-ul elementului, iar sRuleName este numele regulii. Pentru a readuce transparența la starea inițială, utilizați metoda fadeOpacity.back(sElemId).

Voi observa, de asemenea, că pentru o simplă schimbare a transparenței (dar nu o schimbare treptată), pseudo-selectorul :hover este corect, ceea ce vă permite să definiți stiluri pentru un element atunci când treceți mouse-ul peste el.

a:hover img ( filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30); -moz-opacity: 0,3; -khtml-opacity: 0,3; opacitate: 0,3; )

Vă rugăm să rețineți că imaginea este plasată în interiorul elementului A. Faptul este că Internet Explorer până la versiunea 6 înțelege pseudo-selectorul:hover, doar în legătură cu link-uri, și nu cu niciun element, așa cum ar trebui să fie în CSS (situația a fost corectat în IE7) .

Odată cu lansarea Windows XP, a apărut netezirea fonturilor ecranului folosind metoda ClearType și, odată cu aceasta, efectele secundare în IE atunci când se folosește această metodă anti-aliasing. În ceea ce privește cazul nostru, dacă se aplică transparență unui element cu text atunci când metoda anti-aliasing ClearType este activată, atunci textul încetează să mai fie afișat normal (textul aldine, de exemplu, se dublează, pot apărea și diverse artefacte, de exemplu, în formă de liniuțe, text zimțat). Pentru a corecta situația, pentru IE trebuie să setați culoarea de fundal, proprietatea CSS background-color , la elementul căruia i se aplică transparența. Din fericire, eroarea a fost remediată în IE7.

Determină nivelul de transparență al unui element de pagină web. Atunci când elementul este parțial sau complet transparent, imaginea de fundal sau alte elemente situate sub obiectul translucid sunt vizibile.

Valoarea este un număr din interval. O valoare de 0 corespunde transparenței deplină a elementului, 1, dimpotrivă, opacității acestuia. Numerele fracționale de forma 0,6 stabilesc transluciditatea. Este permisă scrierea numerelor fără zero înainte, cum ar fi opacitatea: .6.

Winnie the Pooh nu s-a împotrivit întotdeauna un pic de răcoare, mai ales la unsprezece dimineața, pentru că la acea oră micul dejun se terminase de mult, iar prânzul încă nu începuse. Și, bineînțeles, a fost teribil de bucuros să vadă că Iepurele scotea cești și farfurii.

div (opacitate: 1; )

opacitate .semi ( opacitate: 0,5; /* Transluciditatea elementului */ )

Rezultatul acestui exemplu este prezentat în Fig. 1.

Orez. 1. Rezultatul utilizării opacității

Obiect.stil.opacitate

Firefox până la versiunea 3.5 acceptă proprietatea -moz-opacity.

Internet Explorer până la versiunea 9.0 folosește filtre pentru a modifica transparența pentru acest browser ar trebui să scrieți filtru: alpha(opacity=50) , unde parametrul de opacitate poate lua o valoare de la 0 la 100.

Fiecare specificație trece prin mai multe etape de aprobare.

• Recomandare - Specificația a fost aprobată de W3C și este recomandată ca standard.
• Recomandarea candidatului - Grupul responsabil pentru standard este mulțumit că își îndeplinește obiectivele, dar are nevoie de ajutor din partea comunității de dezvoltare pentru a implementa standardul.
• Recomandare propusă - În această etapă, documentul este înaintat Consiliului Consultativ W3C pentru aprobare finală.
• Proiect de lucru - O versiune mai matură a unui proiect care a fost discutat și modificat pentru revizuire comunitară.
• Proiectul redactorului (Editorial draft) - o versiune nefinalizată a standardului după ce au fost aduse modificări de către editorii de proiect.
• Draft (Draft specification) - prima versiune schiță a standardului.

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

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

Culoare: transparent;

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

Și aceasta este o inovație CSS3. Anterior, nu exista un astfel de mod în dezvoltarea web, exista doar rgb. Cu siguranță știi să înregistrezi culoarea în acest format. Pentru a face acest lucru, trebuie să specificați trei valori între paranteze 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, doar adaugă o a patra valoare - gradul de transparență al elementului de la 0 la 1. În general, acest format de înregistrare este folosit în principal pentru a seta o culoare translucidă, mai degrabă decât 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.

O culoare translucidă 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 pentru fundal în , îl puteți citi dacă sunteți interesat.

O altă proprietate a tehnologiei css3. Dar vreau să vă avertizez imediat că funcționează puțin diferit. Opacitatea stabilește transparența întregului bloc la care este aplicat. Astfel, lizibilitatea textului și percepția imaginilor se deteriorează. Așa că văd rostul folosirii acestei proprietăți numai pentru blocurile care nu conțin 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. Printr-un fundal transparent se vede ceea ce este dedesubt. Uneori trebuie făcut în acest fel prin proiectare. În general, tehnica translucidității este foarte comună astăzi.

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.

Deci, toate acestea se realizează foarte simplu datorită unui format de înregistrare color precum rgba. Dacă lucrați cu editori grafici, atunci probabil știți că modul de culoare rgb înseamnă: proporția de roșu (roșu), proporția 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)

Mai întâi 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ă. Valoarea de la 0 la unu este scrisă aici. 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 proprietatea de fundal la transparență î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ă textului, făcându-l ilizibil.

Avantajele 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ă:

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 vizibil prin el și imaginea de fundal este vizibilă prin el. Această imagine și fundalul sunt doar de exemplu. După cum vă puteți imagina, transparența de fundal în CSS poate fi utilă atunci când doriți ca fundalul unui element imbricat să se arate fără a ascunde alte fundaluri situate pe alte straturi.

Setarea culorii în sine folosind rgba nu este dificilă. După cum sa 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). Prin setarea unor valori diferite, puteți obține milioane de culori diferite, iar transluciditatea vă va permite să veniți cu efecte mult mai frumoase pentru site, dacă este necesar.

Pentru a controla transparența elementelor paginii, utilizați proprietatea de opacitate CSS. Conform specificației, se aplică oricărui tip de nod și este acceptat în toate browserele moderne. Cu ajutorul acestuia, puteți crea un design interesant sau puteți implementa o interacțiune interactivă convenabilă cu utilizatorul.

Sintaxa pentru proprietatea opacității în css arată astfel:

Selector (opacitate: 1; ) selector (opacitate: 0; ) selector (opacitate: 0,4; )

Intrarea acceptă valori numerice în intervalul de la 0 la 1. Parametrul poate reprezenta fracții de unitate, în timp ce un punct este folosit ca separator zecimal în CSS.

Un element cu transparență zero devine invizibil, dar continuă să-și ocupe locul pe pagină și își păstrează capacitatea de a interacționa cu utilizatorul.

Dacă valoarea proprietății este diferită de zero, atunci transparența reală va fi calculată ca procent din o anumită limită superioară. Într-o situație normală, opacitatea: 1 determină opacitatea completă a elementului.

Totuși, dacă elementul are un părinte a cărui transparență este alta decât una, calculul se modifică. Un descendent nu poate fi „mai puțin transparent” decât oricare dintre strămoșii săi. Valoarea proprietății CSS de opacitate a blocului părinte devine limita superioară a opacității nodului copil.

Părinte (opacitate: 0,7; ) copil (opacitate: 1; )

În această situație, elementul copil va fi 30% transparent, chiar dacă valoarea opacității este una.

Exemplul 1: Transluciditatea. Este necesar ca fundalul principal al blocului să fie vizibil sub elementul țintă.

Țintă ( fundal: negru; opacitate: 0,5; )

Nu numai fundalul blocului țintă devine translucid, ci și textul.

Exemplul 2: Controlul dinamic al transparenței. Valoarea proprietății de opacitate CSS a blocului țintă se modifică atunci când treceți cu mouse-ul peste acesta.

Target ( opacitate: 0,2; ) .target:hover ( opacitate: 1; )

Ultimul exemplu demonstrează că elementele transparente continuă să răspundă la evenimentele din pagină, cum ar fi trecerea cu mouse-ul. Acest lucru vă permite să utilizați javascript pentru a controla proprietatea de opacitate CSS, precum și să utilizați mecanisme de tranziție și animație pentru a schimba fără probleme modul de afișare.

Pentru a accesa transparența dintr-un script, trebuie să accesați obiectul de stil al unui anumit element.

// obținerea valorii curente de transparență var opacity = element.style.opacity; // setarea unei noi valori element.style.opacity = 0.4;

Dispariția lină a unui bloc poate fi realizată folosind proprietatea de tranziție CSS:

Element ( opacitate: 0,1; tranziție: opacitate 1000 ms; ) element: hover ( opacitate: 0,8; tranziție: opacitate 2000 ms; )

Acum, nodul elementului, atunci când trece cu mouse-ul, va schimba transparența de la 10 la 80% într-o secundă, iar când cursorul pleacă, se va estompa la valoarea sa inițială în două secunde.

Proprietatea de opacitate CSS în combinație cu mecanismul de tranziție vă permite să creați efecte frumoase.

Principalele subtilități ale mecanismului de opacitate în CSS:

• efectul său se extinde nu numai la fundalul blocului, ci și la conținutul său text, care este de preferință lăsat clar;
• elementele copil nu pot fi mai puțin transparente decât elementele lor părinte.

Dacă aceste efecte complică viața designerului de layout, în loc de opacitate ar trebui să utilizați un fundal transparent simplu, definindu-i valoarea în format RGBA sau HSLA.

Transparența în CSS este o tehnică destul de la modă în ultima vreme, ceea ce provoacă dificultăți în implementarea între browsere. Încă nu există o metodă universală care să permită implementarea transparenței pentru toate browserele. Cu toate acestea, recent situația s-a îmbunătățit considerabil.

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

Un lucru 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 care ar trebui să facă parte din specificația CSS3.

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

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

Proprietatea -khtml-opacity a fost folosită în versiunile mai vechi ale browserelor webkit. Această proprietate a fost retrasă și nu mai este necesară decât dacă sunteți încrezător 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 pe versiunile foarte timpurii ale motorului Mozilla. Firefox a încetat să-l mai suporte în versiunea 0.9.

Pentru majoritatea browserelor moderne, este suficient să folosiți următoarea proprietate:

#myElement ( opacitate: .7; )

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

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

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

#myElement (filtru: alpha(opacity=40); )

Acest exemplu folosește proprietatea filter, care funcționează în versiunile 6-8, totuși pentru versiunile 6 și 7 există o limitare: proprietatea hasLayout a elementului trebuie setată la true . Această proprietate este prezentă doar î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 ( filtrul: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* funcționează în IE6, IE7 și IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; / * numai pentru 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 între ghilimele.

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(opacity=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, function() ( // Animația este completă; acest cod funcționează în toate browserele. ));

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

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

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

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

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

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