Imagine transparentă CSS. Creați fundal transparent în HTML și CSS (opacitate și efecte RGBA)

Transparența CSS este o soluție între browsere - 3,8 din 5 pe baza a 6 voturi

V această lecție ne vom uita la transparența CSS, vom afla cum să adăugăm diverse elemente transparența paginii și obținerea unei compatibilitate deplină între browsere, adică aceeași operațiune a 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. Avea a acestei proprietati există valori de la 0 la 1, care determină gradul de transparență. Unde 0 este transparenta totala, (implicit pentru toate elementele), iar 1 este complet opac. Valorile sunt scrise în fracții: 0,1, 0,2, 0,3 etc.

Exemplu de utilizare:

Transparență între browsere

Nu toate browserele au aceeași înțelegere și implementare a proprietății de opacitate de mai sus. În unele cazuri, trebuie să utilizați un nume de proprietate sau filtre diferite.

Proprietatea de opacitate CSS3 acceptă următoarele vederi Browsere Mozilla 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.

Un browser atât de bun :) ca Internet Explorer până la versiunea 9.0 nu acceptă proprietatea de opacitate și pentru a crea transparență pentru acest browser, trebuie să utilizați proprietatea de filtru și valoarea alfa (Opacitate = X), în care X este un număr întreg în intervalul de la 0 la 100, care determină nivelul de transparență. 0 este complet transparent și 100 este complet opac.

Cu privire la browser 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 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: alfa (Opacitate = 50); / * Transparență pentru IE * / -moz-opacity: 0,5; / * Suport pentru Mozilla 3.5 și versiuni mai mici * / -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 pentru anumite elemente care sunt cel mai des folosite pe o pagină.

Transparența CSS a imaginii.

Să luăm în considerare mai multe opțiuni pentru a crea o imagine translucidă. V următorul exemplu prima imagine nu are transparență, a doua are 50% transparență, a treia 30%.

Rezultat:

Transparență pe CSS când treceți cu mouse-ul peste imagine.

Este adesea necesar să se facă imagine transparentă sau orice alt element în momentul în care cursorul trece peste el. Acest lucru se poate face folosind pseudoclasa CSS: hover. Pentru a face acest lucru, imaginea noastră trebuie să înregistreze două clase, una normală - aceasta va fi starea inactivă a imaginii și a doua clasă cu: pseudo-clasa hover, aici este necesar să specificați transparența imaginii în acest moment de plasarea cursorului.

Puteți vedea rezultatul în demo.

Transparență de fundal la CSS.

Trebuie amintit aici că transparența se aplică tuturor elementelor imbricate și nu pot fi mai transparente decât un element imbricat.

De exemplu, vom da 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%.

Cod simplu:

Iată rezultatul codului de mai sus:

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

scurte informatii

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 de mult, iar cina nici nu se gândise să înceapă. Ș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. 1.

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.

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

În versiunile mai vechi de Firefox și Safari, trebuie să aplicați 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 folosește proprietatea -moz-opacity care a funcționat la versiunile foarte timpurii ale motorului 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ă.

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.

PNG ca fundal

V editor grafic este pregătit preliminar un desen semitransparent monocolor, care este salvat în format PNG-24 (Fig. 1). O caracteristică a acestui format este suportul pentru 256 de niveluri de transparență sau, pur și simplu, poate afișa imagini translucide.

Orez. 1. Imagine pentru crearea fundalului

Apoi adăugăm imaginea ca fundal prin proprietatea de fundal, așa cum se arată în exemplul 1.

Exemplul 1. Folosind un model translucid

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Rezultatul acestui exemplu este prezentat în Fig. 3.

Orez. 2. Aplicarea unui tapet

Browserul învechit Internet Explorer 6 nu funcționează cu transluciditate în PNG-24, dacă dintr-un motiv oarecare trebuie să suportați acest browser, va trebui să utilizați scripturi pentru el.

Această metodă are o serie de limitări. Deci, atunci când dezactivați imaginile din browser, fundalul va dispărea cu totul. În plus, nu este atât de ușor să schimbați culoarea fundalului și valoarea transparenței, pentru aceasta va trebui să editați din nou imaginea.

Imagine în carouri

Această metodă aparține modalităților foarte străvechi de implementare a translucidității, când browserele „nu puteau face nimic” și trebuiau să caute soluții neconvenționale. Trucul este de a crea o imagine care alternează între pixeli transparenți și opaci (Figura 3). Această structură regulată creează un efect translucid, imitându-l în esență.

Orez. 3. Model în carouri mărit

Așa arată până la urmă (Fig. 4).

Orez. 4. Simularea translucidității

Dezavantajele acestei metode sunt comparabile cu cea anterioară; poate apărea și un model moiré și textul se deteriorează.

Proprietatea opacității

Proprietatea opacitate CSS 3 stabilește valoarea opacității și variază de la 0 la 1, unde zero este transparența completă a elementului și unul este opac. Proprietatea de opacitate are o caracteristică specială - transparența se aplică tuturor elemente copilși nu pot depăși valoarea de transparență a părinților lor. Se pare că nu poate exista text opac pe un fundal translucid (exemplul 2).

Exemplul 2. Utilizarea opacității

XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx

Rezultatul exemplului este prezentat în Fig. 5.

Orez. 5. Transluciditatea textului și a fundalului

În Internet Explorer până la 8.0 inclusiv, opacitatea nu funcționează, așa că folosește proprietatea de filtru specifică browserului. Desigur, rezultă un CSS invalid.

RGBA

Abordarea modernă este mult mai simplă și mai clară decât metodele de mai sus și constă în folosirea formatului RGBA pentru culoare și fundal. Primele trei litere sunt familiare pentru mulți și reprezintă roșu, verde, albastru (roșu, verde, albastru), ultimele simbolizează canalul alfa și stabilesc transparența elementului. Formatul de înregistrare este următorul.

culoare de fundal: rgba (r, g, b, a);

Valoarea componentei de culoare este pusă între paranteze în loc de litere, poate fi vizualizată în orice editor grafic, ultima valoare setează transparența și coincide cu valoarea proprietății opacității.

Nu toate browserele acceptă acest format: Internet Explorer de la versiunea 9, Opera de la versiunea 10, Firefox de la 3, Safari de la 3.2. Dar în general, browsere moderne afișați corect transparența. Pentru versiunile mai vechi de IE, puteți specifica separat culoarea în formatul obișnuit, în timp ce, desigur, nu va exista transparență. Sau, din nou, utilizați proprietatea filtru, dar apoi trebuie să suportați și transparența textului (exemplul 3). Pentru a menține CSS valid, am folosit comentarii condiționate.

Exemplul 3. Utilizarea RGBA

HTML5 CSS3 IE Cr Op Sa Fx

Rezultatul exemplului poate fi văzut în fig. 6.

Orez. 6. Fundal semi-transparent cu text opac

Comparați poza cu cea anterioară, literele sunt mai luminoase și mai clare.

V motor de cautare Explorer 7 a întâlnit o eroare la combinarea culorii de fundal cu sensuri diferite... De exemplu, dacă setați culoarea de fundal la roșu, așa cum se arată mai jos, atunci fundalul în IE7 nu se va afișa deloc.

Div (culoare de fundal: roșu; / * Nu se aplică în IE7 * / culoare de fundal: rgba (255, 0, 0, 0,5);)

Acest lucru este rezolvat prin înlocuirea proprietății background-color cu fundal.

Div (fond: roșu; / * Și aceasta funcționează * / fundal: rgba (255, 0, 0, 0.5);) Cu toate acestea, există o avertizare. Validatorul CSS „înjură” în fundal dacă este setat la o valoare în format RGBA... Dar, în același timp, se referă corect la culoarea de fundal. În general, ca întotdeauna, trebuie să alegeți între browsere și valabilitate.

Odată cu apariția CSS3, munca designerilor de layout a devenit mult mai ușoară și mai logică: acum puteți personaliza cu adevărat flexibil orice obiect, folosind JavaScript din ce în ce mai puțin. Să presupunem că trebuie să ajustați transparența fundalului - CSS oferă imediat mai multe opțiuni.

Fundalul este stabilit de un set de atribute, background-repeat, background-attachment, background-origin, background-clip, background-culoare), iar fiecare dintre ele poate fi scris separat sau combinat sub atributul fundal. Să aruncăm o privire mai atentă la fiecare dintre ele.

Atribut de culoare de fundal

Chiar și IE8 acceptă această metodă. Mai multe imagini sunt folosite ca fundal atunci când dispunerea cauciucului... Principalul lucru, nu uitați când utilizați orice imagine, de asemenea, setați Culoare CSS fundal, deoarece utilizatorii pot pur și simplu să nu aibă o imagine încărcată.

Atribut de poziție de fundal

Dacă utilizați o imagine pentru a seta fundalul unui bloc, CSS vă va permite să poziționați imaginea oriunde pe ecran. În mod implicit, imaginea este poziționată în stânga colțul de sus... Atributul acceptă fie indicații verbale (sus, jos, stânga, dreapta), fie indicații numerice (procente, pixeli și alte unități). În acest caz, trebuie să specificați două valori: orizontal și vertical:

body (background-position: right center;) - în acest exemplu, fundalul va fi situat în partea dreaptă a paginii, iar distanțele de sus și de jos față de imagine sunt aceleași.

Atribut dimensiunea fundalului

Uneori cerut cu folosind CSSîntinde fundalul sau reduce dimensiunea acestuia. Pentru aceasta se folosește atributul background-size, iar dimensiunea fundalului poate fi setată atât în ​​pixeli sau procente, cât și în orice alte unități de măsură.

Există câteva probleme cu acest atribut: pentru afișare corectă fundalul în versiunile anterioare ale browserelor trebuie să utilizeze prefixe. Desigur, versiunile curente sprijină pe deplin acest atribut și nevoia de proprietăți specifice a dispărut.

Atribut de atașament de fundal

Acest atribut specifică comportamentul imagine de fundal la defilare. Deci, poate lua 3 valori (excluzând moștenirea, care este comună tuturor atributelor prezentate în acest articol):

• fix- face imaginea de pe fundal nemișcată;
• sul- fundalul defilează împreună cu restul elementelor;
• local- imaginea din fundal defilează dacă conținutul are derulare. Sunt capturate fundaluri care depășesc conținutul.

Exemplu de utilizare:

corp (fond-ataș fix).

Firefox nu acceptă în prezent această din urmă proprietate (locală).

Atribut de origine-fond

Acest atribut este responsabil pentru poziționarea elementului. Browsere versiuni timpurii necesită utilizarea prefixelor. Proprietatea în sine are trei parametri:

• padding-box poziționează fundalul față de margine, ținând cont de grosimea cadrului;
• cutie-chenar diferă de proprietatea anterioară prin aceea că linia de frontieră se poate suprapune complet sau parțial cu fundalul;
• caseta de conținut poziționează imaginea legând-o de conținut.

Dacă sunt date mai multe valori, browserele pot reacționa diferit: Firefox și Opera acceptă doar prima opțiune.

Atribut de repetiție de fundal

De obicei, dacă un fundal este definit de o imagine, acesta ar trebui să se repete orizontal sau vertical. Pentru aceasta este atributul background-repeat. Deci, fundalul unui bloc al cărui CSS conține o astfel de proprietate poate avea unul dintre mai mulți parametri:

• fără repetare- imaginea apare pe pagină într-o singură versiune;
• repeta- fundalul se repetă de-a lungul axelor x și y;
• repeta-x- numai pe orizontală;
• repeta-y- numai pe verticală;
• spaţiu- fundalul se repetă, dar dacă spațiul nu poate fi umplut, atunci apar goluri între poze;
• rundă- imaginea este scalată dacă este imposibil să umpleți întreaga zonă cu imagini întregi.

Un exemplu de utilizare a atributului:

body (background-repeat: repetiție fără repetare)- la fel background-repeat: repetare-y.

În CSS3, este posibil să setați valori pentru mai multe imagini prin enumerarea parametrilor separați prin virgule.

Atribut de clip de fundal

Acest atribut definește comportamentul fundalului sub margini (de exemplu, în cazul marginilor întrerupte):

• padding-box- fundalul este afisat strict in interiorul blocului;
• cutie-chenar- imaginea trece sub rame;
• caseta de conținut- imaginea din fundal apare doar în interiorul conținutului.

Exemplu de utilizare:

body (background-clip: content-box;).

Chrom și Safari necesită prefixul -webkit-.

Opacitate și atribute de filtrare

Atributul de opacitate vă permite să setați transparența fundalului - proprietatea CSS va funcționa în toate browserele. Valoarea este setată în intervalul de la 0,0 la 1,0 inclusiv. Cu aceasta, puteți seta transparența Fundal CSS fără valoare întreagă: în loc de 0,3 este suficient să scrieți 3:

.block (imagine de fundal: url (img.png); opacitate: .3;).

Pentru a seta transparența fundalului, al cărui CSS va funcționa chiar și pentru IE sub cea de-a noua versiune, utilizați atributul de filtru:

.block (imagine de fundal: url (img.png); filtru: alfa (opacitate = 30);).

În acest caz, opacitatea este setată între 0 și 100. Rețineți că atributul de opacitate este diferit de setarea opacității cu folosind RGBA moștenire: când se folosește opacitatea, nu numai fundalul devine transparent, ci toate elementele din interiorul blocului.

Urmăriți întotdeauna statisticile de utilizare a browserelor în CSI și în toate celelalte țări. Cel mai o problema mare Toți designerii de layout sunt versiuni vechi de IE, nu permit utilizarea completă a CSS3. Când te machiezi, nu uita să folosești servicii speciale care verifică dacă browserul tău acceptă vreunul proprietate CSS... Dacă nu puteți instala versiuni vechi de browsere, găsiți un serviciu care va verifica site-ul browsere diferite pe net.