Pentru a crea un efect de transparență în CSS, se utilizează proprietatea opacității.

Browser IE8 și versiunile anterioare suportă o proprietate alternativă - filtru: Alpha (opacitate \u003d x), unde "x" poate avea o valoare de la 0 la 100, cu atât valoarea este mai mică, cu atât este mai transparent este elementul.

Toate celelalte browsere acceptă proprietatea standard CSS opacitate, care poate fi luată ca valoare a numărului de la 0,0 la 1,0, cu atât valoarea este mai mică, cu atât este mai transparent este elementul:

Încerca

Transparență în hovering.

Pseudo-Class: Hover vă permite să schimbați aspectul elementelor când deplasați cursorul mouse-ului. Vom profita de această posibilitate ca imaginea când plimbă mouse-ul își pierde transparența:

Încerca

Transparency Background.

Există două modalități posibile de a face un element transparent: proprietatea opacității descrisă mai sus și indicând culoarea fundalului în format RGBA.

Poate că sunteți deja familiarizat cu modelul de reprezentare a culorilor în format RGB. RGB (roșu, verde, albastru - roșu, verde, albastru) - sistem de culori, care definește o umbră prin amestecarea roșii, verde și albastru. De exemplu, pentru a seta o culoare galbenă pentru text, puteți utiliza oricare dintre următoarele anunțuri:

Culoare: RGB (255,255,0); Culoare: RGB (100%, 100%, 0);

Culorile specificate utilizând RGB vor diferi de valorile hexazecimale pe care le folosim înainte de care vă permit să utilizați canalul de transparență alfa. Aceasta înseamnă că prin intermediul elementului cu transparență alfa se va vedea ceea ce se află sub el.

Anunțul de culoare RGBA este similar cu sintaxa cu reguli standard RGB. Cu toate acestea, printre altele, va trebui să declarăm ca RGBA (în loc de RGB) și să stabilim o valoare suplimentară de transparență zecimală după valoarea de culoare din intervalul de la 0,0 (transparență completă) la 1 (opacitate completă).

Culoare: RGBA (255,255,0,0,5); Culoare: RGBA (100%, 100%, 0,0,5);

Diferența dintre opacitatea și proprietatea RGBA este că proprietatea opacității aplică transparența întregului element al întregului element, adică întregul conținut al elementului devine transparent. Și RGBA vă permite să setați transparența în părțile individuale ale elementului (de exemplu, numai text sau fundal):

Corp (ICPG) .PRIM1 (Lățime: 400px; Marginea: 30px 50px; fundal-culoare: #ffffff; margine: 1px negru solid; font-greutate: bold; opacitate: 0,5; Filtru: Alpha (opacitate \u003d 70); pentru IE8 și versiuni anterioare * / Text-align: centru;) .PRIM2 (lățime: 400px; margine: 30px 50px; fundal-culoare: RGBA (255,255,255,0,5); Border: 1px negru solid; Font-greutate: Bold ; Text-align: centru;) încercați »

Notă: Valorile RGBA nu sunt acceptate în browserul IE8 și în versiunile anterioare. Pentru a decide opțiunea de backup pentru browserele vechi care nu acceptă valorile de culoare cu canale alfa, ar trebui să o specificați mai întâi la valoarea RGBA: Fundal: RGB (255.255,0); Fundal: RGBA (255,255,0,0,5);

Vlad Merzehevich.

Efectul translucenței elementului este bine vizibil pe desenul de fundal și a fost distribuit în diferite sisteme de operare, deoarece arată elegant și frumos. În designul web, se aplică și transluciditatea și se realizează datorită proprietății opacității sau a formatului de culoare RGBA, care este setat pentru fundal.

Bloc cu gradient

Realizați blocul prezentat în fig. 1. Blocul conține un cadru gradient translucid cu un fundal de gradient sub poziția și un indicator mic. Fundalul de pe pagină este doar pentru claritatea efectului de transluciditate, puteți specifica orice imagini. Înălțimea minimă a blocului este de 100px.

Cum să faci un strat translucid?

Pentru a schimba gradul de transparență al elementului, stilul de opacitate este utilizat cu o valoare de la 0 la 1, unde 0 corespunde transparenței deplină și 1, dimpotrivă, opacitatea obiectului. În browserul Internet Explorer, această proprietate nu funcționează, prin urmare, este necesar să se utilizeze filtru special pentru aceasta, o proprietate care nu este inclusă în specificația CSS. În Exemplul 1, se arată cum să se stabilească o transparență a stratului pentru toate browserele.

Fundal translucid

Vlad Merzehevich.

Transparența parțială cu utilizarea corectă a acestuia se uită foarte eficient în designul site-ului. Principalul lucru este că, sub blocurile translucide, nu există un model monofonic, ci imaginea, în acest caz că transparența devine vizibilă. Un astfel de efect este realizat în moduri diferite și, dacă vă amintiți totul, inclusiv metode de modă veche, este utilizarea modelului PNG ca fundal, creând o imagine carcasă și proprietatea opacității. Dar, de îndată ce este necesar să se facă un fundal translucid în bloc, aceste metode se dovedesc a fi o parte neplăcută. Voi face o mică revizuire, astfel încât să devină clar ceea ce este discutat, precum și pentru acei cititori care nu sunt familiarizați cu opțiunile netradiționale pentru crearea unui efect de transluciditate.

Cum se instalează o masă translucidă și nu există nici o parte a celulelor?

Pentru a schimba transparența elementului în CSS3, proprietatea opacității prevede, valoarea sa poate varia de la 0 la 1. Zero corespunde transparenței complete a elementului și a unității, dimpotrivă, opacității. Browserele moderne lucrează perfect cu această proprietate, cu excepția browserului Internet Explorer, deci trebuie să utilizeze o proprietate specială de filtru cu valoarea alfa (opacitate \u003d x), unde X poate varia de la 0 la 100.

/* 06.07.2006 */

CSS Transparență (opacitatea CSS, opacitatea JavaScript)

Efectul transparenței este subiectul acestui articol. Dacă sunteți interesat să aflați cum să faceți elemente de pagini HTML transparente utilizând CSS sau JavaScript și cum să realizați browser-ul încrucișat (aceeași lucrare în diferite browsere), luând în considerare Firefox, Internet Explorer, Opera, Safari, Konqueror Browsere, Apoi, vă rog să vă topiți. În plus, luați în considerare soluția gata făcută la schimbarea treptată a transparenței cu JavaScript.

CSS Opacitate (Transparență CSS)

Simbioza CSS opacitate

Sub simbioză, vreau să spun combinația de diferite stiluri pentru diferite browsere într-o regulă CSS pentru a obține efectul dorit, adică. Pentru a implementa browser-ul încrucișat.

Filtru: PROGID: DXIMAGETRANSF.Microsoft.alpha (opacitate \u003d 50); / * Adică 5,5 + * / -moz-opacitate: 0,5; / * Mozilla 1.6 și mai jos * / -KHTML-opacitate: 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 browserele care înțeleg opacitatea CSS3, iar cele două reguli din mijloc sunt în mod clar făcute, dar nu foarte mult și împiedică (decideți dacă sunt necesare în sine).

JavaScript Opacitate simbioză

Acum, să încercăm să stabilim transparența prin script ținând cont de caracteristicile diferitelor browsere descrise mai sus.

Funcția Seeeeeeeeeeepacitate (selemid, nopacitate) (varptityprith \u003d getopaciyproperty (); var elem \u003d document.getelementbyid (selemid); dacă (! Elem || * opacitroprop) retur; // Dacă nu există nici un element cu ID-ul specificat sau browserul nu acceptă niciunul dintre metodele de control al transparenței cunoscute Dacă (OpacityProp \u003d\u003d "Filter") // Internet Exploder 5.5+ (Nopacitate * \u003d 100; // Dacă transparența a fost deja instalată, schimbați-o prin colectarea filtrelor, altfel adăugăm transparența prin stil.Filter var olpha \u003d elem.Filters ["dximagetransform.microsoft.alpha"] || elem.filters.alpha; dacă (olphaha) olpha.opacitate \u003d nopacitate; alt element.style.filter + \u003d "PROGID: dximagetransform.microsoft.alpha (opacitate \u003d" + nopacitate + ")"; // pentru a nu muta celelalte filtre utilizând "+ \u003d" ) Altfel. // Alte browsere elem.style \u003d nopacitate; ) Funcția GetopaciyProperty () (dacă (TypeoC document.body.style.Opacitate \u003d\u003d "String") // compatibil CSS3 (Moz 1.7+, Safari 1.2+, Opera 9) Returnați "opacitatea"; Altfel dacă (tipul de document.body.style.mozopacitate \u003d\u003d "șir") // Mozilla 1.6 și mai tânăr, Firefox 0.8 Returnați "Mozopacitatea"; Altfel dacă (TypeOf doc.body.style.khtmlopaciy \u003d\u003d "șir") // konqueror 3.1, Safari 1.1 Returnați "khtmlopacitate"; Altfel dacă (document.body.apprversion && navigator.apprversion.match (/ msie ([\\ d] +);\u003e \u003d 5.5) // Internet Exploder 5.5+ Return "Filtru"; Întoarce-te fals; // nici o transparență }

Funcția are două argumente: ID element Selemid, nopacitate - un număr real de la 0,0 la 1.0 specificând transparența în stilul opacității CSS3.

Cred că merită să explicați partea din Codul funcției SeeeleconementoPacitate legat de IE.

Var olpha \u003d elem.Filters ["dximagetransform.microsoft.alpha"] || elem.filters.alpha; dacă (olphaha) olpha.opacitate \u003d nopacitate; alt element.style.filter + \u003d "PROGID: dximagetransform.microsoft.alpha (opacitate \u003d" + nopacitate + ")";

O întrebare poate apărea și de ce să stabilească transparența prin atribuirea (\u003d) proprietatea elemen.style.filter \u003d "..."; ? De ce este "+ \u003d" folosit pentru a adăuga proprietățile filtrului până la capătul șirului? Răspunsul este simplu, pentru a nu "mătura" alte filtre. Dar, în același timp, dacă adăugați un filtru în acest fel, a doua oară, nu va schimba valorile setate anterior ale acestui filtru și vor fi pur și simplu adăugate la capătul șirului de proprietăți, care nu este corect. Prin urmare, dacă filtrul este deja instalat, atunci este necesar să le manipulați prin colectarea filtrelor aplicate elementului: elem.Filters (dar ia în considerare dacă filtrul nu a fost încă atribuit un element, atunci este imposibil să o gestionăm prin această colecție). Accesul la elementele de colectare este posibil fie prin numele filtrului, fie prin index. Cu toate acestea, filtrul poate fi setat în două stiluri, într-un stil scurt IE4 sau în stil IE5.5 +, care este luat în considerare în cod.

Schimbarea netedă a transparenței elementelor

Soluție gata. Folosim opacitatea bibliotecii.

fadeOpacitate (ăsta, "OR1")"Onmouseut \u003d" fADEOPACKACY.BACK (ICE.ID)"Src \u003d" img / strawberry.jpg "width \u003d" 100 "înălțime \u003d" 80 "/\u003e fadeOpacitate (ăsta, "OR1")"Onmouseut \u003d" fADEOPACKACY.BACK (ICE.ID)"src \u003d" / img / tomate.jpg "width \u003d" 82 "înălțime \u003d" 100 "/\u003e fadeOpacitate (ăsta, "OR1")"Onmouseut \u003d" fADEOPACKACY.BACK (ICE.ID)"Src \u003d" / img / sweet_cherry.jpg "width \u003d" 98 "înălțime \u003d" 97 "/\u003e

Pasii principali:

1. Conectăm biblioteca funcțiilor;
2. Determinați regulile folosind metoda fADEOPACITATE.Addrule ();
3. Noi numim metoda fadeopacitate () Pentru a schimba transparența de la valoarea inițială la final sau fADEOPACCETATY.BACK () Pentru a reveni la valoarea inițială a nivelului de transparență.

Mesteca

Cum se conectează biblioteca, cred, pot fi văzute din exemplul de mai sus. Acum merită să explicați definiția regulilor. Înainte de a apela metodele de schimbare netedă a transparenței, este necesar să se determine regulile pe care se va efectua procesul: este necesar să se definească transparența inițială și finală, precum și, dacă se dorește, specificați parametrul de întârziere care afectează viteza procesului de schimbare a transparenței.

Regulile sunt determinate utilizând metoda FADEOPACITATE.Addrule

Sintaxă: FADEOPACITATE.Addrule (Srufename, Nstarpacity, Nfiniscacitatea, Ndalay)

Argumente:

• sRUNAME - Numele regulii este stabilit în mod arbitrar;
• nstaropacitatea și nfinishopacitatea - transparența inițială și finală, numerele în intervalul de la 0,0 la 1,0;
• ndelay - Întârzierea în milisecunde (argumentul opțional, implicit este de 30).

Apelarea transparenței care se confruntă cu metode FADEOPACITATE (SELEMID, SRUNALENAM), unde SELEMID este un ID de element și numele regulii de alunecare. Pentru a returna transparența, metoda FadeOpacitate.back (Selemid) este utilizată pentru a reveni.

: Hover pentru o schimbare ușoară de transparență

De asemenea, am observat că pentru o simplă schimbare de transparență (dar nu a schimbat treptat), selectorul pseudo este potrivit : Hover.care vă permite să identificați stiluri pentru element în momentul șoarecilor de pe acesta.

Rețineți că imaginea este plasată în interiorul elementului A. Faptul este că Internet Explorer până la versiunea 6, înțelege Pseudo-selector: Hover, numai Cu referire, și nu la nici un element, deoarece ar trebui să fie în CSS (în IE7, poziția este fixă).

Transparență și a servit textul în IE

Odată cu eliberarea Windows XP, o netezire a fonturilor de ecran a apărut prin metodă Cleartype., Împreună cu el, efectele secundare în IE la utilizarea acestei metode de netezire. În ceea ce privește cazul nostru, dacă transparența se aplică elementului de text Când este activată metoda de netezire ClearType, textul se oprește în mod normal (text îndrăzneț - Îndrăzneţ.De exemplu, se dublează, pot apărea și diferite artefacte, de exemplu sub formă de cerebrale, text servit). Pentru a remedia situația pentru IE, trebuie să setați o culoare de fundal, proprietate CSS culoare de fundal.Elementul la care se aplică transparența. Din fericire, în bug-ul IE7 eliminat.

Pentru a controla transparența elementelor paginii, se utilizează proprietatea CSS opacitate. Conform specificațiilor, se aplică nodurilor de orice tip și este susținută în toate browserele moderne. Cu aceasta, puteți crea un design interesant sau puteți implementa o interacțiune interactivă convenabilă cu utilizatorul.

Valorile posibile

Sintaxa proprietății opacității în CSS arată astfel:

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

Intrarea este acceptată de valori numerice în intervalul de la 0 la 1. Parametrul poate fi o parte a unității, în timp ce punctul este utilizat ca separator al unei părți întregi și fracționate în CSS.

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

Dacă valoarea proprietății diferă de zero, transparența reală va fi calculată ca procent dintr-o anumită limită superioară. În situația obișnuită, opacitatea: 1 determină opacitatea completă a elementului.

Transparența filialelor

Cu toate acestea, dacă elementul are un părinte, a cărui transparență diferă de la una, modificările de calcul. Descendentul nu poate fi "mai puțin transparent" decât oricare dintre strămoșii săi. Valoarea proprietăților CSS ale blocului părinte devine limita superioară a transparenței filialei.

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

Într-o astfel de situație, elementul copil va fi de 30% transparent, în ciuda faptului că valoarea opacității este egală cu una.

Exemple de utilizare

Exemplul 1. transluric. Este necesar ca blocul de bază de bază să fie vizibil sub elementul țintă.

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

Translucidul devine nu numai fundalul blocului țintă, ci și textul.

Exemplul 2. Controlul dinamic de transparență. Valoarea proprietății de opacitate CSS a unității țintă se schimbă atunci când cursorul se deplasează.

Țintă (opacitate: 0,2;) .target: hover (opacitate: 1;)

Transparență dinamică

Ultimul exemplu demonstrează că elementele transparente continuă să răspundă la evenimente de pagină, cum ar fi plimbări cu cursorul. Acest lucru vă permite să utilizați JavaScript pentru a gestiona proprietatea CSS Opacity, precum și aplicarea mecanismelor de tranziție și animație pentru a schimba fără probleme modul de afișare.

Pentru a accesa transparența din script, trebuie să vă referiți la obiectul de stil al unui anumit element.

// obținerea valorii actuale a transparenței Var opacitate \u003d element.style.opacitate; // setați noul element de valori.Style.Opacitate \u003d 0,4;

Dispariția netedă a unității poate fi implementată utilizând proprietățile CSS ale tranziției:

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

Acum, nodul element atunci când plimbă mouse-ul va schimba transparența de la 10 la 80% pentru o secundă și când părăsiți cursorul - umpleți valoarea sursei timp de două secunde.

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

Alfa canal în loc de opacitate

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

• acțiunea sa se aplică nu numai fundalului blocului, ci și pe conținutul său de text, care este preferabil să lase clar;
• elementele fiice nu pot fi mai puțin transparente decât părintele.

Dacă aceste efecte complică durata de viață a velockerului, în loc de opacitate, ar trebui să utilizați un fundal simplu transparent prin definirea valorii sale în format RGBA sau HSLA.

În această lecție, vom analiza astfel Css. Proprietăți - opacitate și RGBA.. Proprietate Opacitate Răspunsuri numai pentru transparența elementelor și funcția RGBA. - Pentru culoare și transparență, dacă specificați valoarea transparenței canalului alfa.

CSS Opacitate de transparență

Valoarea digitală pentru opacitate Setează de la 0,0 la 1,0, unde zero este transparență completă, iar unitatea, dimpotrivă, este o opacitate absolută. De exemplu, pentru a vedea transparența cu 50%, trebuie să setați o valoare de 0,5. Trebuie să rețineți că opacitate Se aplică tuturor elementelor copilului părintelui. Și acest lucru înseamnă că textul de pe un fundal translucid va fi, de asemenea, translucid. Și acesta este un dezavantaj foarte semnificativ, textul nu este atât de bine alocat.

În captura de ecran, este clar văzută că textul negru a devenit același translucid ca fundalul albastru.

Div (
Fundal: URL (imagini / youurimage.jpg); / * Fundal imagine * /
Lățime: 750px;
Înălțime: 100px;
Marja: Auto;
}
.Albastru (
Fundal: # 027AV4; / * Culoarea fundalului translucid * /
Opacitate: 0,3; / * Valoarea fundalului translucid * /
Înălțime: 70px;
}
H1 (
Padding: 6px;
Font-Family: negru aria;
Greutate font: mai îndrăzneț;
Dimensiune font: 50px;
}

CSS Transparență în format RGBA

Format pentru înregistrarea culorii RGBA.este o alternativă mai modernă pentru proprietate opacitate. R (roșu), g (verde), b (albastru) - Deci: roșu, verde, albastru. Ultima scrisoare A. - înseamnă canalul alfa, care este specificat transparența. RGBA. Spre deosebire de Opacitate Nu afectează elementele copilului.

Acum, să luăm în considerare exemplul nostru folosind RGBA.. Înlocuiți aceste linii în stiluri.

Fundal: ## 027AV4; /* Culoare de fundal */
Opacitate: 0,3; / * Valoarea fundalului translucid * /

pentru următoarea linie

Fundal: RGBA (2, 127, 212, 0,3);

Cum vedeți valoarea transparenței 0,3 coincide cu ambele metode.

Rezultatul unui exemplu cu RGBA:

Al doilea screenshot arată mult mai bine decât primul.

Redarea cu fundal translucid al blocurilor, puteți obține pe site-ul unor efecte interesante. Este important ca aceste blocuri translucide să treacă peste o varietate de imagini, cum ar fi fotografiile. Numai în acest caz efectul va fi vizibil. Această recepție a fost aplicată de mult timp în design, chiar înainte de oricine CSS3.A fost implementat exclusiv în programe grafice.

Dacă clientul cere aspectul să arate bine și în versiunile vechi ale browserului Internet Explorer.Apoi adăugați proprietatea filtru. Și nu uitați să comentați pentru a nu suferi valabilitatea codului.

Ieșire

Format RGBA. Susțineți toate browserele moderne, cu excepția Internet Explorer.. Este încă foarte important ca RGBA. Flexibil, acționează numai pe un element specific specific, fără a afecta filialele. Este clar că pentru Camera este mai convenabil. Alegerea mea este cu siguranță în favoarea formularului RGBA. pentru a primi transparență în CSS..

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