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 atinge 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. Peste tot fundal transparent se vede ce este dedesubt. 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. Mai sunt ceva proprietatea de opacitate 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, în fundal css transparența poate fi utilă atunci când doriți ca fundalul unui element imbricat să fie vizibil fără a ascunde alte fundaluri de pe 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.

Î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 aplica tuturor elemente copil mamă. Aceasta înseamnă că textul pe un fundal translucid va fi, de asemenea, translucid. Și asta este deja foarte dezavantaj semnificativ, textul nu iese la fel de bine.

Î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 mai mult alternativă modernă pentru 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 realiza pe site efecte interesante... 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, acţionează doar asupra unui anume element dat fără 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.

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 opacitatea unui element, utilizați proprietatea stil de opacitate cu o valoare de la 0 la 1, unde 0 corespunde transparenței totale și 1, dimpotrivă, opacității obiectului. Această proprietate nu funcționează în Internet Explorer, 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 este nevoie de a face în bloc fundal translucid, 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. Browsere moderne functioneaza destul de corect cu aceasta proprietate, cu exceptia 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.

Determină nivelul de transparență al unui element de pagină web. Cu transparență parțială sau totală, elementul apare imagine de fundal sau alte elemente de sub obiectul translucid.

informatie scurta

Denumiri

Valorile

Valoarea este un număr din interval. O valoare de 0 corespunde transparenței depline a elementului, 1, dimpotrivă, opacității acestuia. Numerele fracționale tipul 0,6 stabilește transluciditatea. Este permis să scrieți numere fără zero înainte, cum ar fi opacitatea: .6.

Cutie cu nisip

Winnie the Pooh nu s-a împotrivit întotdeauna la o mică răcoritoare, mai ales la ora unsprezece dimineața, pentru că la această oră micul dejun se terminase deja de mult și nici măcar nu se gândise să înceapă prânzul. Și, desigur, a fost teribil de încântat să-l vadă pe Rabbit scoțând cești și farfurii.

div (opacitate: 1;)

Exemplu

Rezultat acest exemplu prezentată în fig. unu.

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

Model de obiect

Un obiect.stil.opacitate

Notă

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

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

Specificație

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

• Recomandare - Această specificație a fost aprobată de W3C și este recomandată ca standard.
• Recomandarea candidatului ( Recomandare posibilă ) - grupul responsabil de standard este mulțumit că acesta este în concordanță cu obiectivele sale, dar este necesar ajutorul comunității de dezvoltatori pentru implementarea standardului.
• Recomandare propusă ( Recomandare sugerată) - În acest moment, documentul este înaintat Consiliului Consultativ W3C pentru aprobare finală.
• Proiect de lucru - O versiune mai matură a proiectului după discuții și amendamente pentru revizuirea comunității.
• Schița redactorului ( Proiect editorial) - o versiune preliminară a standardului după editarea de către editorii de proiect.
• Ciornă ( Proiect de specificație) este primul proiect al standardului.

/* 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ă realizați cross-browser (funcționează la fel în diferite browsere), dat Browsere Firefox, Internet Explorer, Opera, Safari, Konqueror, atunci ești binevenit. Î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 pentru obtinerea 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 vremea, 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 - începerea și sfârșitul transparenței, 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 o culoare de fundal, proprietate CSS culoare de fundal, elementul căruia i se aplică transparența. Din fericire, IE7 a remediat eroarea.