|
Uneori este nevoie de a face un fundal transparent pentru un anumit bloc de pe pagină. Acest efect poate fi obținut prin crearea unei imagini de fundal transparentă în format *.png și setarea acesteia prin proprietatea de fundal: url(“./images/fon.png”); . Folosind proprietatea OPACITATE De ce o asemenea complexitate dacă se poate face cu asta folosind CSS. Să creăm un bloc principal (pagină) și un bloc imbricat (bloc) pe pagină, la care vom seta transparența. Compatibilitatea între browsere se realizează după cum urmează: proprietate pentru Internet Explorer– filtru: alfa (opacitate=50) ( valoare de transparență cuprinsă între 0 și 100), pentru browsere care acceptă standardul CSS3 – opacitate:0.5 ( număr variind de la 0,0 la 1,0). Cod HTML: Element semi-transparent div.page ( margine: 0 auto; lățime: 450 px; înălțime: 300 px; fundal: url(../images/3a0fdf3dc1.jpg) fără repetare; chenar: 2px solid #555555 ) div.block ( lățime : 260px ; înălțime: 140px margin-left: 94px; -aliniere: centru ) Fundal transparent pentru bloc.
Rezultat: Fundal transparent pentru bloc După cum ați observat, transparența se aplică tuturor elementelor secundare Fundal transparent pentru bloc în DIV-uri cu bloc de clasă și nu pot depăși valoarea de transparență a părintelui lor. Adică tot ceea ce este în acest bloc devine transparent. Ce să faci dacă trebuie să lași un fundal transparent doar pentru div? Folosind proprietatea BACKGROUND-COLOR Trebuie să facem câteva modificări la foaia de stil CSS, și anume, să înlocuim proprietatea opacitate pentru DIV cu clasa de bloc cu proprietatea background-color. Div.block ( lățime:260px; înălțime:140px; margin-top:79px; margin-left:94px; border:1px solid #333333; /* doar fundal transparent DIV.block */ background-color: rgba(255, 255) , 255, 0,5); /* Culoare de fundal, transparență 0,5*/ ) Rezultat: Fundal transparent pentru bloc În exemplul de mai sus este folosit pentru culoare și fundal format RGBA. Unde, primele trei litere reprezintă roșu, verde, albastru (roșu, verde, albastru), ultima simbolizează canalul alfa (a) și specifică transparenţă b element din 0.0
la 1.0
. Culoare de fundal: rgba(r, g, b, a); Valoarea componentei de culoare este plasată în paranteze în loc de litere, poate fi vizualizată în orice editor grafic, de exemplu Paint.Net (captură de ecran). Ultima valoare a a stabilește transparența și este aceeași cu valoarea proprietății opacitate. http://cp77.comxa.com/verstka/css-transparent-fon
Proprietatea opacitate CSS stabilește opacitatea unui element. Opacitatea este gradul în care conținutul este ascuns în spatele unui element și este opusul transparenței.
Sursa pentru acest exemplu interactiv este stocată într-un depozit GitHub. Dacă doriți să contribui la proiectul de exemple interactive, clonează https://github.com/mdn/interactive-examples și trimite-ne o cerere de extragere.
opacitatea se aplică elementului ca întreg, inclusiv conținutului său, chiar dacă valoarea nu este moștenită de elementele copil. În acest fel, elementul și copiii săi au aceeași opacitate față de fundalul elementului, chiar dacă au opacitate diferită unul față de celălalt.
Utilizarea opacității cu o altă valoare decât 1 plasează elementul într-un nou context de suprapunere. Exemple Exemplu de bază div ( culoare de fundal: galben; ) .light ( opacitate: 0,2; /* Textul este abia vizibil pe fundal */ ) .medium ( opacitate: 0,5; /* Textul este mai vizibil pe fundal */ ) .grea ( opacitate: 0,9; /* Vizibilitatea textului este foarte clară pe fundal */ ) Abia poți vedea asta. Acest lucru este mai ușor de văzut. Acest lucru este foarte ușor de văzut. Opacitate diferită cu:hover img.opacity ( opacitate: 1; filtru: alpha(opacity=100); /* IE8 și mai jos */ zoom: 1; /* „hasLayout” declanșează în IE 7 și mai jos */ ) img.opacity :hover ( opacitate: 0..png" alt="Sigla MDN" width="128" height="146"
class="opacity">
Проблемы доступности
!} Dacă opacitatea textului este ajustată, este important să vă asigurați că raportul de contrast dintre culoarea textului și fundalul pe care este plasat textul este suficient de mare pentru ca persoanele cu vedere slabă să poată citi conținutul paginii.
Raportul de contrast al culorii este determinat prin compararea luminozității textului cu opacitatea ajustată și valoarea culorii de fundal. Pentru a respecta orientările actuale privind accesibilitatea conținutului web (WCAG), conținutul text necesită un raport de 4,5:1 și 3:1 pentru text mai mare, cum ar fi titlurile. Textul mare este definit ca 18,66 px sau mai mare sau 24 px sau mai mare. Specificații Valoarea inițială | 1.0
|
Se aplică la | toate elementele |
Moştenit | Nu |
Afişa | vizual |
Prelucrarea valorii | valoarea specificată este tăiată la interval |
Tip de animație | număr |
Ordine canonică | ordine unică ambiguă definită de gramatica formală |
Suport pentru browser Tabelul de compatibilitate de pe această pagină este generat din date structurate. Dacă doriți să contribuiți la date, vă rugăm să consultați https://github.com/mdn/browser-compat-data și să ne trimiteți o cerere de extragere.
Actualizați datele de compatibilitate pe GitHub |
| Calculatoare Mobile |
| Chrome Edge Firefox Internet Explorer Opera Safari Android Webview Chrome pentru Android Firefox pentru Android Opera pentru Android Safari pe iOS Samsung Internet opacitate | Suport complet Chrome 1 | Suport Edge Full 12 | Firefox Suport complet 1 Suport complet 1 Fără suport 1 - 3.5 Cu prefix
Cu prefix
Necesită prefixul furnizorului: -moz- | IE Suport complet 9 | Opera Suport complet 9 | Safari Suport complet 2 Suport complet 2 Fără suport 1.1 - 2 Cu prefix
Cu prefix
Necesită prefixul furnizorului: -khtml- | WebView Android Suport complet 1 | Chrome Android Suport complet 18 | Suport Firefox Android Full 4 | Opera Android Suport complet 10.1 | Safari iOS Suport complet 1 | Samsung Internet Android Suport complet Da |
Suport pentru valori procentuale de opacitate | Suport complet Chrome 78 | Edge Fără suport Nr | Firefox Suport complet 70 | IE Fără suport Nr | Opera Fără suport Nr | Safari Fără suport Nr | WebView Android Suport complet 78 | Compatibilitate Chrome Android Full 78 | Firefox Android Fără suport Nr | Opera Android Fără suport Nr | Safari iOS Fără suport Nr | Samsung Internet Android Fără suport Nr |
Legendă Suport complet Asistență completă Fără suport Fără suport Necesită un prefix de furnizor sau alt nume pentru a fi utilizat.
Necesită un prefix de furnizor sau alt nume de utilizat. O zi bună, tociști în dezvoltare web, precum și începători. Pentru cei care nu urmăresc tendințele IT, sau mai degrabă moda web, aș dori să vă informez solemn că această publicație este pe tema: „Cum se face un bloc transparent instrumente css» tocmai la timp pentru tine. Într-adevăr, în actualul 2016, introducerea diferitelor obiecte transparente în serviciile online este considerată o mișcare elegantă.
Prin urmare, în acest articol vă voi spune despre toate metodele existente de a crea transparență, pornind de la soluțiile antediluviane, mă voi concentra pe compatibilitatea soluțiilor cu browsere și, de asemenea, voi oferi exemple concrete codul programului. Acum să trecem la treabă! Metoda 1. Antediluvian Când erau încă acolo calculatoare slabe iar „abilitățile” nu sunt dezvoltate, dezvoltatorii au venit cu propriul mod de a crea fundal transparent: Utilizați pixeli transparenți alternativ cu pixeli colorați. Blocul creat în acest fel arăta ca o tablă de șah la scară, dar la dimensiunea normală semăna cu un fel de transparență.
În opinia mea, această „cârjă” ajută cu siguranță în versiunile mai vechi ale browserelor în care soluțiile moderne nu funcționează. Dar este de remarcat faptul că calitatea afișării textului introdus într-un astfel de format scade brusc. Metoda 2. Nu deranjat În cazuri rare, dezvoltatorii rezolvă problema introducerii unei imagini translucide inserând... o imagine translucidă gata făcută! În acest scop, sunt folosite imaginile salvate în format PNG-24. Dat format grafic vă permite să setați 256 de niveluri de transluciditate.
| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| Exemplul 1 BODY ( background: url(http://i75.mindmix.ru/50/90/349050/42/6073342/hhhttttttttt.png); background-size:100%; ) div ( lățime: 65%; text- align: center-top: 35px margin-left: 15% Textul din imagine este în format png;
Cu toate acestea, această metodă nu este convenabilă din mai multe motive:
Internet Explorer 6 nu funcționează cu această tehnologie, trebuie să scrieți codul de script;
Nu puteți schimba culorile de fundal în css;
Dacă funcția de afișare a imaginii a browserului este dezactivată, aceasta va dispărea. Metoda 3. Promovată Cea mai comună și cunoscută modalitate de a face un bloc transparent este proprietatea opacității.
Valoarea parametrului variază în interval, unde la 0 obiectul este invizibil, iar la 1 este complet vizibil. Cu toate acestea, există și câteva momente neplăcute aici.
În primul rând, toate elementele copil moștenesc transparență. Aceasta înseamnă că textul introdus va „străluci” împreună cu fundalul.
În al doilea rând, Internet Explorer „reduce din nou nasul” și, până la versiunea 8, nu funcționează cu opacitate.
Pentru a rezolva această problemă, utilizați filtrul: alpha (Opacitate=valoare) . Să ne uităm la un exemplu.
| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| Exemplul 2 BODY ( background: url(http://www.uarating.com/news/wp-content/uploads/2016/05/flowers-04-may-2016.jpg) no-repeat; background-size:100% ; ) div ( background: #FFEFD5; opacitate: 0,88; filtru: alpha(Opacity=88); padding: 25px; text-align:center; ) În magazinul nostru veți găsi tot felul de culori. Metoda 4. Modern Astăzi, profesioniștii folosesc instrumentul rgba (r, g, b, a).
Înainte de asta, v-am spus că RGB este unul dintre cele mai populare modele de culoare, unde R este responsabil pentru toate nuanțele de roșu, G – nuanțele de verde și B – nuanțele de albastru.
În cazul în care parametrul css variabila A este responsabilă pentru canalul alfa, care, la rândul său, este responsabil pentru transparență.
Principalul avantaj al acestei din urmă metode este că canalul alfa nu afectează obiectele situate în interiorul blocului stilizat.
rgba(r, g, b, a) este suportat începând de la:
- Opera versiunea 10;
- Internet Explorer 9;
- Safari 3.2;
- 3 versiuni de Firefox.
vreau sa notez fapt interesant! Îndrăgitul Internet Explorer 7 aruncă o eroare la combinarea proprietății de culoare de fundal cu numele culorilor (culoarea de fundal: auriu). Prin urmare, ar trebui să utilizați numai:
culoare de fundal: rgba (255, 215, 0, 0,15)
Și acum un exemplu.
| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| 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; ) În magazinul nostru veți găsi tot felul de culori.
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%.
Aceasta încheie publicația. Abonați-vă la blogul meu și nu uitați să invitați prietenii. Vă doresc mult succes în î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ă obțineți compatibilitatea între browsere (funcționând la fel în diferite browsere), ținând cont Browsere Firefox, Internet Explorer, Opera, Safari, Konqueror, atunci sunteți bineveniți. În plus, luați în considerare soluție gata făcută Schimbarea treptată a transparenței folosind javascript. Opacitatea CSS (transparență CSS) Simbioza opacității CSS Prin simbioză mă refer la combinarea diferitelor stiluri browsere diferiteîntr-una regula CSS pentru a obține efectul dorit, adică 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). Simbioza de opacitate Javascript 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. Schimbați ușor transparența unui element 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" /> Pași de bază: Conectăm biblioteca de funcții;
Definim 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ță. Să mestecăm 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).
Numim transparența stingerea în sine prin metodele fadeOpacity(sElemId, sRuleName), unde sElemId este id-ul elementului și sRuleName este numele regulii. Pentru a reveni la transparență starea initiala Este folosită metoda fadeOpacity.back(sElemId). :hover pentru a schimba cu ușurință transparența 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) . Transparență și text zimțat în IE 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.
Pentru a crea un efect transparent în CSS, se folosește proprietatea opacitate.
IE8 și versiunile anterioare acceptă o proprietate alternativă - filter:alpha(opacity=x) , unde " x " poate varia de la 0 la 100 , cu cât valoarea este mai mică, cu atât elementul va fi mai transparent.
Toate celelalte browsere acceptă opacitatea proprietății CSS standard, care poate lua un număr de la 0,0 la 1,0 ca valoare, cu cât valoarea este mai mică, cu atât elementul va fi mai transparent: Numele documentului .myClass ( float: stânga; margine-dreapta: 5px; opacitate: 0,4; filtru: alpha(opacity=40); /*pentru IE8 și versiuni anterioare*/ ) 
 Încercați » Transparență la hover Pseudo-clasă:hover vă permite să schimbați aspect elemente când treceți cursorul mouse-ului peste ele. Vom folosi această funcție pentru a face ca imaginea să-și piardă transparența atunci când trece cu mouse-ul peste: Titlul documentului img ( float: stânga; margine-dreapta: 5px; opacitate: 0,4; filtru: alpha(opacity=40); /*pentru IE8 și versiuni anterioare*/ ) img:hover ( opacitate: 1.0; filtru: alpha( opacitate= 100);
 Încercați » Transparența fundalului Sunt două moduri posibile face elementul transparent: proprietatea de opacitate descrisă mai sus și specificând culoarea de fundal în format RGBA.
Este posibil să fiți deja familiarizați cu modelul de reprezentare a culorilor RGB. RGB (Roșu, Verde, Albastru - roșu, verde, albastru) este un sistem de culori care determină nuanța prin amestecarea roșu, verde și albastru. De exemplu, pentru a seta culoarea textului la galben, puteți utiliza oricare dintre următoarele declarații: Culoare: rgb(255,255,0); culoare: rgb(100%,100%,0); Culorile specificate folosind RGB vor diferi de valorile hexazecimale pe care le-am folosit anterior prin faptul că permit utilizarea unui canal de transparență alfa. Aceasta înseamnă că prin fundalul unui element cu transparență alfa, ceea ce se află sub acesta va fi vizibil.
Declararea unei culori RGBA este similară ca sintaxă cu regulile RGB standard. Cu toate acestea, va trebui, de asemenea, să declarăm valoarea ca RGBA (în loc de RGB) și să specificăm o valoare suplimentară de transparență zecimală după valoarea culorii între 0,0 (complet transparent) și 1 (complet opac). Culoare: rgba(255,255,0,0.5); culoare: rgba(100%,100%,0,0.5); Diferența dintre proprietatea de opacitate și proprietatea RGBA este că proprietatea de opacitate aplică transparență întregului element, ceea ce înseamnă că întregul conținut al elementului devine transparent. Și RGBA vă permite să setați transparența părților individuale ale unui element (de exemplu, doar textul sau fundalul): Corp ( imagine de fundal: url(img.jpg); ) .prim1 ( lățime: 400px; margine: 30px 50px; culoarea fundalului: #ffffff; chenar: 1px negru solid; greutate font: bold; opacitate: 0,5; filtru : alpha(opacity=70); /*pentru IE8 și anterioare*/ text-align: center .prim2 ( width: 400px; margin: 30px 50px; background-color: rgba(255,255,255,0.5); margine: 1px solid black; ; font-weight: bold text-align: center ) Încercați » Notă: valorile RGBA nu sunt acceptate în IE8 și mai sus versiuni anterioare. Pentru a declara o culoare de rezervă pentru browserele mai vechi care nu acceptă valori de culoare alfa, ar trebui să o specificați mai întâi înainte de valoarea RGBA: background: rgb(255,255,0); fundal: rgba(255,255,0,0.5);
|
Nou
Cum să restabiliți ciclul menstrual după naștere:
|
|
|
