Vrei să înveți cum să creezi pagini cu un design modern, original și vibrant? Utilizarea elementelor translucide vă poate ajuta în rezolvarea acestei sarcini dificile. Astăzi ne vom uita la principalele modalități practice de stabilire a transparenței elementelor structurale.

Cum stabilesc transparența?

Dacă luăm în considerare acest subiect prin prisma dezvoltării istorice a tehnologiilor web, atunci se pot distinge următoarele abordări:

• Proprietate opacitate.
• Utilizare Imagine PNG- Poze
• Format de sistem RGBA
• Și în sfârșit, imaginile antichități sau în carouri.

Proprietatea CSS Opacitate

Aplicație de styling CSS proprietăți opacitate vă permite să setați transparența elementului la care este aplicat. Valorile care pot fi folosite ca argument variază de la 0 la 1.
Să ne uităm la un exemplu.

< html> < head> < title>TODO furnizați un titlu < meta charset= "UTF-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "css/style2.css" /> < body> < div class = " prozrachen " >Va fi mult textul tău

/ * Fundal pentru corpul paginii * /). prozrachen (padding: 10px; / * Indentare pentru text * / fundal: turcoaz închis; / * Setați culoarea de fundal * / marja: 0 auto; / * Centrați blocul * / latime: 50%; / * Setați lățimea blocului * / opacitate: 0,7; / * Setați transparența * / font: 48px / 64px Times New Roman; text-align: justificare; )

Ca rezultat, am obținut un bloc translucid:

Important!!!

1. Opacitate ia valori din intervalul: 0 (transparență totală) - 1 (opac).
2. Compatibilitate între browsere. V IE până la a șaptea versiune inclusiv Opacitate nu sunt acceptate. Următoarea linie vă va ajuta să obțineți aceeași afișare a unui element:

   filtru: alfa (Opacitate = 70);

   Trebuie avut în vedere faptul că proprietatea filtru absent în html specificații, modifică valorile de la 1 la 100 și poate fi aplicată numai elementelor:

   • cu pozitionare absoluta ( poziție: absolută)
   • cu o dimensiune liniară fixă ​​( înălțime sau lățime).
3. Gradul de transparență este moștenit de copii, prin care transparența poate fi crescută pentru copil, dar nu poate fi redusă. Adică, pe un fundal translucid, nu faceți text CLEAR.

Pentru o mai bună înțelegere a materialului ultimului punct, în exemplul anterior, setați textul la alb.

culoare albă;

și luați în considerare la microscop:

După cum puteți vedea, conținutul blocului nostru (text) a devenit și el translucid. Dar dacă în practică nu te interesează transparența conținutului, ci doar transparența fundalului? În acest caz, treceți la punctul următor.

Utilizarea imaginilor PNG

O caracteristică interesantă a formatului Imagine PNG este că are 256 de niveluri de transparență. Cred că ați prins șirul gândurilor și probabil că ați construit deja un algoritm pentru funcționarea acestei abordări. Trebuie doar să-i spun.

Ca rezultat, am obținut un bloc cu un fundal transparent și conținut opac:

Important!!!

1. Spre deosebire de proprietate opacitate transparența este setată numai pentru fundal
2. Compatibilitate între browsere. Funcționează în aproape toate browserele și acesta este un plus. Dar transparență Imagine PNG nu este suportat în IE6... Dacă vă optimizați site-ul pentru o astfel de vechime, va trebui să utilizați alte metode sau scripturi.
3. Când opriți afișarea imaginilor, fundalul dvs. va dispărea (ține cont de acest punct când optimizați afișarea pe dispozitivele mobile, deoarece internetul nelimitat nu este întotdeauna la îndemână).
4. Pentru a schimba culoarea și/sau transparența, trebuie să creați o nouă imagine și să o încărcați din nou pe server.

Format de sistem RGBA

Una dintre cele mai moderne metode de modificare a transparenței fundalului este utilizarea sistemului RGBA.

RGBA- sistem de reprezentare a culorilor folosind trei canale standard RGB(roșu, verde, albastru), iar al patrulea, așa-numitul Alfa-canal care caracterizează gradul de transparenţă.

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

În exemplul pe care îl știm deja, să înlocuim conținutul în CSS fișier la următoarele:

body (fundal: url (./ vaden- pro- logo. png); / * Imagini de fundal * /). prozrachen (padding: 10px; fundal: rgba (0, 206, 209, 0,7); margine: 0 auto; lățime: 50%; font: 48px / 64px Times New Roman; culoare: alb; text-align: justify;)

Important!!!

1. Spre deosebire de proprietate opacitate transparența este setată numai pentru fundal
2. Spre deosebire de metoda Imagine PNG poze, pentru a schimba culoarea sau gradul de transparență, trebuie doar să schimbăm valorile rgba.
3. Compatibilitate între browsere. Funcționează în toate browserele moderne (începând cu IE9, Op10, Fx3,Sf3.2 Browserele mai vechi vor trebui fie să sacrifice transparența, fie să utilizeze opacitate, png metode.

Imagini în carouri sau respect pentru istorie

Această metodă a fost la originea designului web și a văzut browsere vechi, vechi, care chiar nu știau cum să facă nimic. Constă în crearea unui fundal în carouri în care pătratele colorate alternează cu cele transparente.

Ca urmare a aplicării unei astfel de imagini, a fost obținut un fundal pseudo-transparent ca fundal.

Important!!!

1. Când vizualizați text pe un astfel de fundal, ochii se pot obosi rapid (în special ondulațiile la derulare apăsați în jos).
2. Restul caracteristicilor aplicației sunt similare cu metoda „PNG-pictures”.

Să rezumam?

• Ar trebui să existe o imagine strălucitoare, nu monotonă sub blocul transparent. Pe un fundal simplu, pofta de transparență se pierde.
• Atunci când alegeți o abordare practică specifică, ghidați-vă după ce browsere folosește publicul țintă. Compatibilitatea între browsere este importantă.

Î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 extinde la toți copiii părintelui. Aceasta înseamnă că textul pe un fundal translucid va fi, de asemenea, translucid. Și acesta este deja un dezavantaj foarte semnificativ, textul nu iese atât de bine în evidență.

Î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 o alternativă mai modernă la 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 obține efecte interesante pe site. 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ă.

Ieșire

Format RGBA sunt acceptate de toate browserele moderne, cu excepția Internet Explorer... De asemenea, este foarte important ca RGBA flexibil, actioneaza doar asupra unui anumit element specificat, fara a afecta copiii. Este clar că acest lucru este mai convenabil pentru designerul de layout. Alegerea mea este clar în favoarea formatului RGBA a primi transparență în CSS.

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

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

În această lecție, ne vom uita la transparența CSS, vom învăța cum să facem transparente diferitele elemente ale paginii și să obținem 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. Această proprietate are valori de la 0 la 1, care determină gradul de transparență. Unde 0 este transparența totală (implicit pentru toate elementele) și 1 este opacitatea totală. 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 este acceptată de următoarele tipuri de browsere Mozilla 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.

Un browser atât de bun :) precum 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 cu care se determină nivelul de transparență. 0 este complet transparent și 100 este complet opac.

Începând cu browserul Firefox înainte de 3.5, acesta 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ă. În exemplul următor, prima imagine nu are opacitate, a doua are 50% opacitate, iar a treia 30%.

Rezultat:

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

Este adesea necesar să faceți o imagine sau orice alt element transparent în momentul în care cursorul trece peste ea. Acest lucru se poate face folosind pseudoclasa CSS: hover. Pentru a face acest lucru, imaginea noastră trebuie să primească două clase, una normală - aceasta va fi starea inactivă a imaginii și a doua clasă cu: pseudo-clasa hover, aici trebuie 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:

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 obținut în diferite moduri și, dacă vă amintiți totul, inclusiv metodele de modă veche, atunci se utilizează 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 dezavantaj neplăcut. Voi face o mică prezentare generală, astfel încât să devină clar ce este în joc, precum și pentru acei cititori care nu sunt familiarizați cu opțiunile neconvenționale pentru crearea efectului de transluciditate.

PNG ca fundal

Un desen semitransparent monocolor este pregătit preliminar într-un editor grafic, 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 este extinsă la toți copiii, iar aceștia nu pot depăși valoarea de transparență a părintelui 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 opacitate.

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, browserele moderne redau transparența corect. 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.

În Internet Explorer 7, a fost găsită o eroare la combinarea culorii de fundal cu valori 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ă i se dă 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.

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 obține o 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, în 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. Ceea ce este dedesubt poate fi văzut prin fundalul transparent. 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ă lucrați cu editori grafici, atunci probabil știți că modul de culoare rgb este descifrat astfel: proporție de roșu (roșu), proporție de verde (verde) și albastru (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. Există și proprietatea opacității, 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 un fundal general pentru o pagină. 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 prin el și prin el puteți vedea imaginea de fundal. Această imagine și fundalul au doar scop ilustrativ. După cum vă puteți imagina, transparența în fundal CSS poate fi utilă atunci când aveți nevoie de fundalul unui element imbricat pentru a se afișa fără a ascunde alte fundaluri situate în alte straturi.

Nu este dificil să setați culoarea în sine folosind rgba. 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). Prin prescrierea unor valori diferite, puteți obține milioane de culori diferite, iar transluciditatea vă va permite să veniți cu o mulțime de efecte frumoase pentru site, dacă este necesar.