| Exemplul 3 BODY ( background: url(http://www.uarating.com/news/wp-content/uploads/2016/05/flowers-04-may-2016.jpg) no-repeat; background-size:100% ; ) .block( background-color: rgba(255, 228, 196, 0.88); padding: 25px; text-align:center; ) Puteți găsi tot felul de culori în magazinul nostru.
Rețineți că conținutul text al blocului este complet vizibil (100% negru), în timp ce fundalul este setat la un canal alfa de 0,88, adică. 88%.
Acest post a ajuns la final. Abonați-vă la blogul meu și nu uitați să vă invitați prietenii. Succes la învățarea limbilor web! Pa! Pa!
/* 06.07.2006 */
Transparență CSS (opacitate css, opacitate javascript) 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ă realizați cross-browser (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 o soluție gata făcută pentru schimbarea treptată a transparenței folosind javascript. Opacitatea CSS (transparență CSS) Simbioza opacității CSS 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 implementare cross-browser. 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, prima și ultima reguli sunt necesare, pentru IE5.5+ și browsere care înțeleg opacitatea CSS3, iar cele două reguli din mijloc evident nu fac nicio diferență, dar nici nu interferează cu adevărat (decideți singur dacă ai nevoie de ele). Simbioza de opacitate Javascript Acum să încercăm să setăm transparența prin 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 de funcția de control al transparenței dacă (opacityProp=="filtru") // Internet Exploder 5.5+ ( nOpacity *= 100; // Dacă transparența este deja setată, atunci schimbați-o prin filtre colecție, altfel adăugați transparență prin style.filter var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity ="+nOpacity+")"; // Pentru a nu suprascrie alte filtre, folosiți "+=" ) else // Alte browsere elem.style = nOpacity; ) function getOpacityProperty() ( dacă (tip de document.body.style.opacity == „șir”) // compatibil 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”; returnează fals; // fara transparenta ) Funcția ia două argumente: sElemId - id-ul elementului, nOpacity - un număr real de la 0,0 la 1,0 care specifică transparența în stilul de opacitate CSS3.
Cred că merită să explic partea IE a codului funcției setElementOpacity. VaroAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filtre.alfa; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+")"; Poate apărea întrebarea, de ce să nu setați transparența atribuind (=) proprietății elem.style.filter = "..."; ? De ce să folosiți „+=" 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ă, atunci 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ă filtrul este deja setat, 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 de gestionat aceasta 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. Schimbați ușor transparența unui element Soluție gata. Folosind 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 , și un parametru opțional întârzie 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" /> Pași de bază: Conectăm biblioteca de funcții;
Definiți regulile folosind metoda fadeOpacity.addRule();
Apelăm metoda fadeOpacity() pentru a schimba transparența de la valoarea inițială la valoarea finală, sau fadeOpacity.back() pentru a reveni la valoarea inițială a nivelului de transparență. mestecat 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 metode pentru modificarea fără probleme a transparenței, trebuie să definiți regulile după care va fi efectuat procesul: trebuie să definiți transparența inițială și finală și, dacă doriți, să specificați un parametru de întârziere care afectează viteza procesului de modificare. transparenţă.
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).
Numim estomparea transparenței în sine folosind metodele fadeOpacity(sElemId, sRuleName), unde sElemId este id-ul elementului și sRuleName este numele regulii. Pentru a readuce transparența la starea inițială, utilizați metoda fadeOpacity.back(sElemId). :hover pentru schimbare simplă a transparenței De asemenea, observ că pentru o simplă modificare a transparenței (dar nu o schimbare treptată), pseudo-selectorul :hover este potrivit, ceea ce vă permite să definiți stiluri pentru un element în momentul în care treceți cu 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 pseudoselectorul :hover, doar în legătură cu link-uri, și nu cu niciun element, așa cum ar trebui să fie în CSS (în IE7 situația a fost corectată) . Transparență și text zimțat în IE Odată cu lansarea Windows XP, a apărut anti-aliasing ClearType a fonturilor de ecran și, odată cu ea, efectele secundare în IE atunci când se folosește această metodă de anti-aliasing. În ceea ce privește cazul nostru, dacă se aplică transparență unui element cu text cu metoda anti-aliasing ClearType activată, atunci textul nu mai este afișat în mod normal (text îngroșat - bold , de exemplu, se dublează, pot apărea și diverse artefacte, de exemplu, sub formă de liniuțe, text zimțat). Pentru a remedia situația, pentru IE trebuie să setați culoarea de fundal, proprietatea CSS background-color , elementul căruia i se aplică transparența. Din fericire, IE7 a remediat eroarea.
În această lecție, vom analiza astfel de proprietăți CSS - opacitate și RGBA. Proprietatea Opacitate este responsabilă doar pentru transparența elementelor, iar funcția RGBA este responsabilă pentru culoare și transparență, dacă specificați valoarea transparenței canalului alfa. Opacitatea CSS Valoarea numerică pentru opacitate este dată în intervalul de la 0,0 la 1,0, unde zero este transparență totală și unu, dimpotrivă, este opacitate absolută. De exemplu, pentru a vedea 50% transparență, trebuie să setați valoarea la 0,5. Rețineți că opacitatea se aplică tuturor elementelor secundare ale părintelui. Și asta înseamnă că și textul pe un fundal translucid va fi translucid. Și acesta este deja un dezavantaj foarte semnificativ, textul nu iese atât de bine în evidență.
Transparență prin CSS Opacity
Captura de ecran arată clar că textul negru a devenit la fel de translucid ca fundalul albastru. Div(
fundal: url(images/yourimage.jpg); /* Imagine de fundal */
latime: 750px
înălțime: 100px;
margine: auto;
}
.albastru(
fundal: #027av4; /* Culoare de fundal translucidă */
opacitate: 0,3 /* Valoarea translucidității fundalului */
inaltime: 70px;
}
h1(
umplutură: 6px
familie de fonturi: Arial Black;
font-weight: îndrăzneț;
dimensiunea fontului: 50px;
} Transparență CSS în format RGBA Formatul de culoare RGBA este o alternativă mai modernă la proprietatea opacității. R (roșu), G (verde), B (albastru) - înseamnă: roșu, verde, albastru. Ultima literă A înseamnă canalul alfa, care stabilește transparența. RGBA, spre deosebire de Opacity, nu afectează elementele copil.
Acum să ne uităm la exemplul nostru folosind 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 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ă meargă deasupra unui model colorat, cum ar fi o fotografie. Numai în acest caz efectul va fi vizibil. Această tehnică a fost folosită în design de mult timp, chiar înainte de apariția oricărui CSS3, a fost implementată exclusiv în programe grafice.
Dacă clientul solicită ca aspectul să arate bine în versiunile mai vechi ale browserului Internet Explorer, atunci adăugați proprietatea filtrului și nu uitați să comentați, astfel încât valabilitatea codului să nu sufere.
.albastru(
fundal: rgba(0, 120, 201, 0,3);
filtru: alpha(Opacity=30); /* Transparență în IE */
}
Concluzie Formatul RGBA este acceptat de toate browserele moderne, cu excepția Internet Explorer. De asemenea, este foarte important ca RGBA să fie flexibil, afectând doar un anumit element dat, fără a-i afecta copiii. Este clar că este mai convenabil pentru codificator. Alegerea mea este cu siguranță în favoarea formatului RGBA pentru obținerea transparenței în CSS.
Pentru o mai bună consolidare a materialului și o mai mare claritate, vă sugerez să treceți prin. Crearea unui fundal transparent în HTML și CSS (opacitate și efecte RGBA) Efectul de transluciditate al elementului 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 este să nu 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 utilizarea proprietății opacitate. Dar de îndată ce devine necesar să se facă un fundal translucid în 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ă toate elementele copil 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. Corpul de opacitate HTML 5 CSS 3 IE 9 ( fundal: url(images/cat.jpg); ) div ( opacitate: 0,6; fundal: #fc0; /* Culoare fundal */ padding: 5px; /* Umplutură în jurul textului */ ) Crearea si promovarea site-urilor pe Internet În web design, transparența parțială este, de asemenea, utilizată și obținută prin formatul de culoare RGBA, care este setat doar pentru fundalul elementului.
De obicei, într-un design, doar fundalul unui element ar trebui să fie translucid, iar textul ar trebui să fie opac pentru a-l păstra lizibil. Proprietatea de opacitate nu se potrivește 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 roșii, albastre și verzi ale culorii sunt enumerate între paranteze separate prin virgule. Ultimul vine transparența, care este setată de la 0 la 1, cu 0 fiind complet transparent și 1 fiind opac, sintaxa pentru aplicarea rgba. Fundal semi-transparent HTML 5 CSS 3 IE 9 rgba body ( fundal: url(images/cat.jpg); ) div ( fundal: rgba(0, 170, 238, 0.4); /* Culoare fundal */ culoare: #fff ; / * Culoare text */ padding: 5px; /* Margini în jurul textului */ ) Crearea și promovarea site-urilor pe Internet. Valoarea opacității pentru fundal este setată la 90% - un fundal translucid și text opac.
Transparență CSS - soluție cross browser - 3,8 din 5 pe baza a 6 voturi
În acest tutorial, ne vom uita la transparența CSS, vom învăța cum să facem transparente diferitele elemente ale paginii și să obținem un cross-browser complet, adică același efect al acestui efect în browsere diferite. Cum să setați transparența oricărui element În CSS3, proprietatea opacitate este responsabilă pentru crearea elementelor transparente, care pot fi aplicate oricărui element. Această proprietate are valori de la 0 la 1, care determină gradul de transparență. Unde 0 este complet transparent (valoarea implicită pentru toate elementele) și 1 este complet opac. Valorile sunt scrise ca fracții: 0,1, 0,2, 0,3 etc.
Exemplu de utilizare:
Transparență .im ( filtru: alpha(Opacity=50); -moz-opacity: 0,5; -khtml-opacity: 0,5; opacitate: 0,5; )
Transparență între browsere Nu toate browserele percep și implementează proprietatea de opacitate de mai sus în același mod. În unele cazuri, este necesar să utilizați un nume de proprietate sau filtre diferite.
Proprietatea de opacitate CSS3 este acceptată de următoarele browsere Mozilla 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.
Atât de bine :) Browserul precum Internet Explorer până la versiunea 9.0 nu acceptă proprietatea opacității și pentru a crea transparență pentru acest browser trebuie să utilizați proprietatea filtrului și valoarea alpha(Opacity=X) unde X este un număr întreg între 0 și 100 care determină nivelul de transparență. 0 este transparenta totala si 100 este opacitatea totala.
Începând cu Firefox înainte de versiunea 3.5, acceptă proprietatea -moz-opacity în loc de opacitate.
Browsere precum Safari 1.1 și Konqueror 3.1, construite pe motorul KHTML, folosesc proprietatea -khtml-opacity pentru a controla transparența.
Cum să setați transparența în CSS, astfel încât să arate la fel în toate browserele? Pentru a crea o soluție cross-browser pentru transparența elementelor, acestea trebuie să înregistreze nu numai o proprietate de opacitate, ci și următorul set de proprietăți:
filtru: alpha(Opacity=50); /* Transparență pentru IE */ -moz-opacity: 0,5; /* Suport pentru Mozilla 3.5 și versiunile anterioare */ -khtml-opacity: 0.5; /* Suport pentru Konqueror 3.1 și Safari 1.1 */ opacitate: 0,5; /* Suport pentru toate celelalte browsere */ Transparența diferitelor elemente Să ne uităm la câteva exemple de setare a transparenței anumitor elemente care sunt cel mai des folosite pe pagină.
Transparența imaginii CSS.
Luați în considerare mai multe opțiuni pentru a crea o imagine translucidă. În exemplul următor, prima imagine nu are transparență, a doua are 50% transparență, iar a treia are 30%.
Transparență .im1 ( filtru: alpha(Opacity=50); -moz-opacity: 0,5; -khtml-opacity: 0,5; opacitate: 0,5; ) .im2 (filtru: alpha(Opacity=30); -moz-opacity: 0,3 ; -khtml-opacitate: 0,3; opacitate: 0,3; )
Rezultat:
Transparență în CSS atunci când treceți cu mouse-ul peste o imagine.
Este adesea necesar să faceți o imagine sau orice alt element transparent în momentul în care cursorul este plasat peste ea. Acest lucru se poate face folosind pseudoclasa CSS :hover. Pentru a face acest lucru, imaginea noastră trebuie să înregistreze două clase, una obișnuită - aceasta va fi starea inactivă a imaginii și a doua clasă cu pseudo-clasa: hover, aici trebuie să specificați transparența imaginii la momentul trecând cursorul.
Transparency .im1 ( filtru: alpha(Opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacitate: 1; ).im1:hover (filtru: alpha(Opacity=50); -moz-opacity : 0,5; -khtml-opacity: 0,5; opacitate: 0,5; ) .im2 (filtru: alfa (Opacity=30); -moz-opacity: 0,3; -khtml-opacitate: 0,3; opacitate: 0,3; ) .im2:hover ( filtru: alfa(Opacitate=100); -moz-opacity: 1; -khtml-opacity: 1; opacitate: 1; )
Rezultatul îl puteți vedea în demo.
Transparență de fundal CSS
Aici trebuie să rețineți că transparența se aplică tuturor elementelor imbricate și nu pot avea mai multă transparență decât elementul imbricat.
De exemplu, să dăm o variantă cu un fundal de pagină creat folosind o imagine și un bloc cu un fundal creat folosind culoare și având o transparență de 50%.
Exemplu de cod:
Transparency BODY ( fundal: url(bg.png); /* Imagine de fundal */ ) .blok ( fundal: #FC0; /* Culoare fundal */ padding: 5px; /* Padding */ culoare: #000000; /* Text culoare */ filtru: alpha(Opacity=50); -moz-opacity: 0,5; -khtml-opacitate: 0,5; opacitate: 0,5; ) Text
Iată rezultatul codului de mai sus:
| 
