Faceți culoarea CSS transparentă. Culoare transparentă în css și modalități de setare

Vrei să înveți cum să creezi pagini cu un design modern, original și luminos? Utilizarea elementelor translucide vă poate ajuta să rezolvați această problemă dificilă. Astăzi ne vom uita la principalele modalități practice de a seta transparența elementelor structurale.

Cum se stabilește transparența?

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

• Proprietate opacitate.
• Utilizare PNG- Poze
• Format de sistem RGBA
• Ei bine, și în cele din urmă, imagini antichitate sau în carouri.

Proprietatea opacității CSS

Aplicarea stilului 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 o mulțime de text aici

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

Ca rezultat, am obținut un bloc translucid:

Important!!!

1. Opacitate ia valori din intervalul: 0 (transparență totală) – 1 (opacitate).
2. Compatibilitate între browsere. ÎN I.E. până la versiunea șapte inclusiv Opacitate nu sunt acceptate. Următoarea linie vă va ajuta să obțineți aceeași afișare a elementului:

   filtru: alpha(Opacity= 70 ) ;

   Merită să luați în considerare faptul că proprietatea filtru lipsă din 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 elementele copil, iar un element copil își poate crește transparența, dar nu o poate reduce. Adică, nu puteți face text NOT TRANSPARENT pe un fundal translucid.

Pentru o mai bună înțelegere a materialului din ultimul paragraf, în exemplul anterior vom seta culoarea textului la alb

culoare albă;

și uită-te 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 următorul punct.

Utilizarea imaginilor PNG

O caracteristică interesantă a formatului PNG este că are 256 de niveluri de transparență. Cred că ați prins trenul gândurilor și probabil că ați construit deja un algoritm pentru modul în care funcționează această abordare. Tot ce pot face este 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, ceea ce este un plus. Dar transparență 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 (luați în considerare acest punct atunci când optimizați afișarea pe dispozitive mobile, deoarece internetul nelimitat nu este întotdeauna la îndemână).
4. Pentru a schimba culoarea și/sau gradul de transparență, trebuie să creați o nouă imagine și să o încărcați pe server.

Format de sistem RGBA

Una dintre cele mai moderne metode de schimbare 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 deja cunoscut de noi, înlocuim conținutul în CSS fișier la următoarele:

body ( fundal: url(./ vaden- pro- logo. png) ; /* Imagine de fundal */). prozrachen ( umplutură: 10px; fundal: rgba(0 , 206 , 209 , 0,7 ) ; margine: 0 automat; 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 pe fundal
2. Spre deosebire de metoda PNG poze, pentru a schimba culoarea sau gradul de transparenta trebuie doar sa schimbam valorile rgba.
3. Compatibilitate între browsere. Funcționează în toate browserele moderne (de la IE9, Op10, Fx3,Sf3.2).Pentru browserele mai vechi va trebui fie să sacrificeți transparența, fie să utilizați opacitate, png metode.

Imagini în carouri sau cu privire la istorie

Această metodă a fost la originile designului web și a văzut browsere vechi, vechi, care nu puteau face nimic cu adevărat. Constă în crearea unui fundal în carouri în care pătratele colorate alternau cu cele transparente.

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

Important!!!

1. Când vizualizați text pe un astfel de fundal, ochii vă pot obosi rapid (undulurile la defilare sunt deosebit de apăsătoare).
2. În caz contrar, caracteristicile aplicației sunt similare cu metoda „Imagine PNG”.

Să rezumam?

• Sub blocul transparent ar trebui să existe o imagine strălucitoare, nemonotonă. Pe un fundal monocromatic, accentul transparenței 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ă.

Transparență CSS - soluție cross-browser - 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ă acordăm transparență diferitelor elemente ale paginii și să obținem compatibilitate deplină între browsere, adică acest efect va funcționa la fel în diferite browsere.

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ă (valoarea implicită pentru toate elementele), iar 1 este opacitatea totală. Valorile sunt scrise ca fracții: 0,1, 0,2, 0,3 etc.

Exemplu de utilizare:

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 tipuri de browsere: Mozilla 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.

Atât de bine :) un browser 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 de filtru și valoarea alpha(Opacity=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.

Î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 puteți seta transparența în CSS, astfel încât să arate la fel în toate browserele? Pentru a crea o soluție între browsere pentru transparența elementelor, trebuie să specifice 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ă Mozilla 3.5 și versiunile anterioare */ -khtml-opacity: 0.5; /* Suportă Konqueror 3.1 și Safari 1.1 */ opacitate: 0,5; /* Suporta 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.

Să ne uităm la mai multe opțiuni pentru crearea unei imagini translucide. În exemplul următor, prima imagine nu are setată transparență, a doua are o transparență de 50%, iar a treia are 30%.

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 trece peste ea. Puteți face acest lucru folosind pseudo-class:hover CSS. 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: treceți cu mouse-ul, aici trebuie să specificați transparența imaginii în acest moment de plasarea cursorului.

Rezultatul îl puteți vedea în demo.

Transparență de fundal folosind CSS.

Aici este necesar să ne amintim că transparența se aplică tuturor elementelor imbricate și nu pot avea o transparență mai mare decât elementul 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 postat mai sus:

Vei avea nevoie

• - program Photoshop
• - o imagine care trebuie să aibă un fundal translucid.
• - știi cum să creezi un nou strat
• - să poată folosi instrumentul de umplere și să desenezi forme în Photoshop

Instrucțiuni

Faceți dublu clic pe numele stratului cu imaginea și în câmpul care apare, scrieți orice nume nou pentru acest strat. Acest lucru este necesar pentru a muta liber acest strat și a obține un fundal transparent atunci când eliminați părți din imagine. Dacă imaginea are deja un fundal opac, uniform, atunci selectați-o cu instrumentul Baghetă magică. Pentru a face acest lucru, selectați acest instrument în bara de instrumente și faceți clic pe culoarea de fundal, după care va fi selectată toată culoarea specificată (pe care a fost făcut clic cu mouse-ul) din zona închisă. Ștergeți selecția apăsând tasta Delete.

Dacă nu este uniformă, atunci selectați imaginea în sine cu instrumentul „Rectilinie” sau „Pen”. Dacă selectați o imagine cu instrumentul Pen, aranjați calea dorită și, dacă este necesar, editați-o cu instrumentul Pen+. Când editați cu acest instrument, puteți adăuga puncte de ancorare făcând clic pe calea creată și, mutând punctele, modificați-l. Apoi, fără a elimina cursorul din cale, faceți clic dreapta și selectați „Creare selecție”. Setați valoarea Feather la 0 pixeli și bifați opțiunea Smoothing. Ca rezultat al acestor acțiuni, calea va fi convertită într-o selecție. Ștergeți selecția apăsând tasta Delete.

Creați un nou strat și plasați-l sub stratul de imagine. Cu cursorul deasupra, faceți clic pe butonul stâng al mouse-ului și, fără a elibera butonul, mutați cursorul sub stratul cu imaginea. În acest fel, veți trage un nou strat sub stratul imaginii. Sub imaginea în sine, creați un fundal opac de culoarea și forma dorite.

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 pe tema: „Cum să faceți un bloc transparent cu instrumente css” este potrivită pentru dvs. Î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 creare a transparenței, pornind de la soluțiile antediluviane, mă voi concentra pe compatibilitatea soluțiilor cu browsere și, de asemenea, voi da exemple specifice de cod de program. Acum să trecem la treabă!

Metoda 1. Antediluvian

Când computerele erau încă slabe și „abilitățile” nu erau dezvoltate, dezvoltatorii au venit cu propriul mod de a crea un fundal transparent: folosind pixeli transparenți la rândul lor cu cei 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șajului textului , înscris în astfel, cade 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. Acest format grafic vă permite să setați 256 de niveluri de transluciditate.

Cu toate acestea, această metodă nu este convenabilă din mai multe motive:

1. Internet Explorer 6 nu funcționează cu această tehnologie; trebuie să scrieți codul de script pentru aceasta;
2. Nu puteți schimba culorile de fundal în css;
3. Dacă funcția de afișare a imaginii a browserului este dezactivată, aceasta va dispărea.

Metoda 3. Promovată

Cel mai comun și cunoscut mod de a face un bloc transparent este proprietatea opacitate.

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 „imite din nou nasul” și, până la versiunea 8, nu funcționează cu opacitate.

Pentru a rezolva această problemă, utilizați filtru:alfa (Opacitate=valoare).

Să ne uităm la un exemplu.

Metoda 4. Modern

Astăzi, profesioniștii folosesc instrumentul rgba (r, g, b, a).

Anterior, v-am spus că RGB este unul dintre modelele de culoare populare, unde R este responsabil pentru toate nuanțele de roșu, G pentru nuanțele de verde și B pentru nuanțele de albastru.

În cazul parametrului 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.

Aș dori să subliniez un fapt interesant! Îndrăgitul Internet Explorer 7 aruncă o eroare la combinarea proprietăților culoare de fundal cu numele culorilor (culoare-fond: auriu). Prin urmare, ar trebui să utilizați numai:

culoare de fundal: rgba (255, 215, 0, 0,15)

Și acum un exemplu.

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%.

Proprietatea CSS RGBa vă permite să setați o culoare de fundal cu un canal alfa (adică să umpleți blocurile cu o culoare semi-transparentă).

Desigur, CSS are o proprietate de opacitate, dar principalul său dezavantaj este că toate elementele copil din interiorul unui bloc transparent își vor moșteni și opacitatea.

Cel mai adesea, folosesc PNG24 de un pixel pentru a umple fundalul unui element și pentru a fixa transparența în IE6 sau pentru a face fundalul transparent folosind opacitatea css. Textul este poziționat separat într-un alt element, dar acest lucru, după părerea mea, nu este în totalitate convenabil...

Prin utilizarea RGBa solutia arata cam asa:

1. Să presupunem că avem nevoie de un fundal albastru cu 50% transparență.

Dar IE6–8, Opera 9.x, Mozilla Firefox 2.x nu îl vor accepta

2. Pentru IE, puteți încerca să o faceți mai elegant:

Notă: Culoarea din filtru este specificată de 8 numere. Primele 2 numere sunt gradul de transparență: FF - complet opac, 00 - transparent. Următoarele 6 numere sunt desemnarea obișnuită a culorii HTML.

Utilizarea RGBa nu se limitează doar la culoarea de fundal a blocurilor...