Vlad Merjevici

Efectul de transluciditate al elementului 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. În designul web, transluciditatea este de asemenea aplicată și obținută prin proprietatea opacității sau formatul de culoare RGBA care este setat pentru fundal.

Bloc de gradient

Realizați blocul prezentat în fig. 1. Blocul conține un cadru gradient semi-transparent cu un fundal gradient sub titlu și un indicator mic. Fundalul de pe pagină este afișat numai pentru claritatea efectului de transluciditate, puteți specifica oricare dintre propriile imagini. Înălțimea minimă a blocului este de 100 px.

Cum fac un strat semi-transparent?

Pentru a modifica transparența unui element, aplicați stilul proprietatea de opacitate cu o valoare de la 0 la 1, unde 0 corespunde transparenței totale, iar 1, dimpotrivă, opacității obiectului. În browser Internet Explorer această proprietate nu funcționează, așa că trebuie să utilizați filtrul special pentru ea, o proprietate care nu face parte din specificația CSS. Exemplul 1 arată cum să setați transparența stratului pentru toate browserele.

Fundal translucid

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 atins căi diferiteȘ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 aspect neplăcut. revers... voi face mica privire de ansamblu să fie clar ce în cauză, precum și pentru acei cititori care nu sunt familiarizați cu opțiuni neconvenționale pentru crearea unui efect translucid.

Cum să setați tabelul la semi-transparent, dar unele dintre celule nu sunt?

Pentru a modifica transparența unui element în CSS3, este furnizată proprietatea opacității, valoarea acesteia poate varia de la 0 la 1. Zero corespunde transparenței depline a elementului, iar unul, dimpotrivă, opacității. Browserele moderne funcționează destul de corect cu această proprietate, cu excepția motor de cautare Explorer, deci pentru aceasta trebuie să utilizați o proprietate specială de filtru cu valoarea alfa (Opacitate = X), unde X poate varia de la 0 la 100.

/* 06.07.2006 */

Transparență CSS (opacitate css, opacitate javascript)

Transparența este subiectul acestui articol. Dacă sunteți interesat de cum să faceți transparente elementele paginii html folosind CSS sau Javascript și cum să obțineți un comportament între browsere (aceeași lucru în diferite browsere) ținând cont de browserele Firefox, Internet Explorer, Opera, Safari, Konqueror, atunci sunt binevenite. În plus, luați în considerare soluție gata făcută schimbând treptat transparența folosind javascript.

Opacitatea CSS

Simbioza opacității CSS

Prin simbioză mă refer la unificare stiluri diferite pentru browsere diferiteîntr-una regula CSS a primi efectul dorit, adică pentru implementare cross-browser.

Filtru: progid: DXImageTransform.Microsoft.Alpha (opacitate = 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 că nu fac diferența, dar nu prea interferează (decideți singur dacă aveți nevoie lor).

Simbioza de opacitate Javascript

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

Funcția setElementOpacity (sElemId, nOpacity) (var opacityProp = getOpacityProperty (); var elem = document.getElementById (sElemId); if (! Elem ||! OpacityProp) return; // Dacă elementul cu id-ul specificat nu există sau browserul nu acceptă nici una dintre funcțiile cunoscute privind modul de control al transparenței if (opacityProp == „filtru”) // Internet Exploder 5.5+ (nOpacity * = 100; // Dacă transparența este deja setată, atunci modificați-o prin colecția de filtre, altfel adăugați transparență prin style.filter var oAlpha = elem.filters [„DXImageTransform.Microsoft.alpha”] || elem.filtre.alfa; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter + = "progid: DXImageTransform.Microsoft.Alpha (opacitate =" + nOpacity + ")"; // Pentru a nu suprascrie alte filtre, folosiți „+ =") altfel // Alte browsere elem.style = nOpacitate; ) funcția getOpacityProperty () (dacă (tip de 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 versiuni 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”; returnează fals; // fără transparență }

Funcția are două argumente: sElemId - id-ul elementului, nOpacity - un număr în virgulă mobilă de la 0,0 la 1,0 care specifică opacitatea CSS3.

Cred că ar putea merita să clarificăm partea legată de IE a funcției setElementOpacity.

Var oAlpha = elem.filters [„DXImageTransform.Microsoft.alpha”] || elem.filtre.alfa; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter + = "progid: DXImageTransform.Microsoft.Alpha (opacitate =" + nOpacity + ")";

S-ar putea să vă întrebați de ce nu setați transparența atribuind (=) la elem.style.filter = "..."; ? De ce să folosiți „+ =" pentru a adăuga o proprietate de filtru la sfârșitul unei linii? 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ă, atunci acesta nu se va schimba mai devreme valorile stabilite a acestui filtru, dar va fi pur și simplu adăugat la sfârșitul liniei de proprietate, ceea ce nu este corect. Prin urmare, dacă filtrul este deja instalat, atunci trebuie să îl manipulați prin colecția de filtre aplicate elementului: elem.filters (dar rețineți, dacă filtrul nu a fost încă atribuit elementului, atunci gestionați-l prin această colecție imposibil). Elementele colecției pot fi accesate fie prin numele filtrului, fie prin index. Cu toate acestea, filtrul poate fi specificat în două stiluri, stil scurt IE4 sau stil IE5.5 +, care este luat în considerare în cod.

Schimbarea lină a transparenței elementului

Soluție gata făcută. Folosind biblioteca opacity.js

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 / tomate.jpg "width =" 82 "height =" 100 "/> fadeOpacity (this.id, "oR1")"onmouseout =" fadeOpacity.back (this.id)"src =" / img / sweet_cherry.jpg "width =" 98 "height =" 97 "/>

Pași de bază:

1. Conectăm biblioteca de funcții;
2. Definim reguli folosind metoda fadeOpacity.addRule ();
3. Apelarea metodei fadeOpacity () pentru a modifica transparența de la valoarea de început la valoarea finală sau fadeOpacity.back () a reveni la valoarea initiala nivelul de transparență.

Mesteca

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

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 termină transparența, numere în intervalul de la 0,0 la 1,0;
• nDelay - întârziere în milisecunde (opțional, implicit la 30).

Decolorarea transparenței în sine este apelată prin metodele fadeOpacity (sElemId, sRuleName), unde sElemId este id-ul elementului și sRuleName este numele regulii. Pentru a reveni la transparență starea initiala se folosește metoda fadeOpacity.back (sElemId).

: treceți cursorul pentru a schimba cu ușurință transparența

Mai observ că pentru o simplă schimbare a transparenței (dar nu o schimbare treptată), pseudo-selectorul este pe măsură : planează, care vă permite să definiți stiluri pentru un element atunci când treceți cu mouse-ul peste el.

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 de trecere cu mouse-ul, numai aplicat legăturilor, și nu oricăror elemente, așa cum ar trebui să fie în CSS (în IE7 situația este fixă).

Transparență și text zimțat în IE

CU Lansare Windows XP a introdus anti-aliasing fonturi de ecran metodă Cleartypeși odată cu ea efectele secundare în IE atunci când utilizați această metodă anti-aliasing. În cazul nostru, dacă se aplică transparență unui element cu text atunci când metoda anti-aliasing ClearType este activată, atunci textul încetează să se afișeze normal (text aldine - îndrăzneţ, de exemplu, duble, pot apărea și diverse artefacte, de exemplu, sub formă de linii, text zimțat). Pentru a remedia situația, pentru IE trebuie să setați culoare de fundal, proprietate CSS culoare de fundal, elementul căruia i se aplică transparența. Din fericire, IE7 a remediat eroarea.

Transparența în CSS este o tehnică destul de la modă în timpuri recente ceea ce provoacă dificultăți în implementarea între browsere. Inca nu exista metoda universala care ar permite transparență pentru 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ă realizați acelasi rezultatîn toate browserele cu 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

Pe vechi versiunile Firefox iar Safari trebuie să aplice 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.

V rândul următor a folosit proprietatea -moz-opacity care a funcționat pentru foarte versiuni timpurii Motor Mozilla. Firefox a încetat suportul pentru acesta în versiunea 0.9.

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

Pentru majoritatea browserelor moderne, este suficient de utilizat proprietatea următoare:

#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

Ca 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.

#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ă.

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, pe 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ă lucrezi cu editori grafici atunci probabil că știi asta modul color rgb înseamnă roșu, verde și 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 fundal general pagini. 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 și vizibil prin el imagine 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.

Setați culoarea în sine cu folosind rgba nu e complicat. 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). Prescrierea sensuri diferite poți obține milioane Culori diferite, iar transluciditatea vă va permite să veniți cu mult mai mult efecte frumoase pentru site, dacă este necesar.

Proprietate Opacitatea CSS responsabil de transparența elementelor (imagini, text, blocuri) în html.

Sintaxa opacității CSS

Unde valoarea poate lua valori reale în intervalul 0,0 până la 1,0. O valoare de 1,0 înseamnă lipsă de transparență (implicit).

Exemplul #1. Imagine transparentă în html

Prima imagine este afișată fără transparență, a doua cu 0,5 transparență

Transluciditatea elementului

Fă ca imaginea să fie semi-transparentă la hover!

DemoDownload sursa

Multumesc pentru atentie!

Articolul următor
Cum se creează bloc div cu defilare?