Bëni ngjyrën css transparente. Ngjyra transparente në css dhe mënyrat për ta vendosur atë

Dëshironi të mësoni se si të krijoni faqe me një dizajn modern origjinal dhe të ndritshëm? Përdorimi i elementeve të tejdukshëm mund t'ju ndihmojë të zgjidhni këtë problem të vështirë. Sot do të shikojmë mënyrat kryesore praktike për të vendosur transparencën e elementeve strukturorë.

Si të vendosni transparencën?

Nëse e konsiderojmë këtë temë përmes prizmit të zhvillimit historik të teknologjive të internetit, mund të dallojmë qasjet e mëposhtme:

• Prona errësirë.
• Përdorimi PNG-Fotot
• Formati i sistemit RGBA
• Epo, dhe së fundi, antikiteti ose imazhe me kuadrate.

Vetia CSS Opacity

Aplikimi i stilit CSS Vetitë errësirë ju lejon të vendosni transparencën e elementit në të cilin aplikohet. Vlerat që mund të përdoren si argument variojnë nga 0 në 1.
Le të shohim një shembull.

< html> < head> < title>TODO jep një titull < meta charset= "UTF-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "css/style2.css" /> < body> < div class = " prozrachen " >Këtu do të ketë shumë tekste

/* Sfondi për trupin e faqes */) . transparente (mbushje: 10px; /*Varjet për tekstin*/ sfond: bruz i errët; /* Vendos ngjyrën e sfondit */ marzhi: 0 auto; /* Qendër bllokun */ gjerësia: 50%; /* Vendosni gjerësinë e bllokut */ tejdukshmëria: 0,7 ; /* Vendos transparencën */ fonti: 48px/ 64px Times New Roman; tekst- align: justify; )

Si rezultat, ne morëm një bllok të tejdukshëm:

E rëndësishme!!!

1. Opaciteti merr vlera nga diapazoni: 0 (transparencë e plotë) - 1 (opacitet).
2. Pajtueshmëria me shfletues. NË I.E. deri në versionin shtatë përfshirës Opaciteti nuk mbështetet. Rreshti i mëposhtëm do të ndihmojë për të arritur të njëjtin shfaqje të elementit:

   filtri: alfa(Opacity= 70 ) ;

   Vlen të merret parasysh se prona filtër mungon nga html specifikimet, ndryshon vlerat nga 1 në 100 dhe mund të aplikohet vetëm për elementët:

   • me pozicionim absolut ( pozicioni: absolut)
   • me një madhësi lineare fikse ( lartësia ose gjerësia).
3. Shkalla e transparencës trashëgohet nga elementët fëmijë, dhe një element fëmijë mund të rrisë transparencën e tij, por nuk mund ta bëjë atë më pak. Kjo do të thotë, nuk mund të bëni tekst JO TRANSPARENT në një sfond të tejdukshëm.

Për një kuptim më të mirë të materialit në paragrafin e fundit, në shembullin e mëparshëm do ta vendosim ngjyrën e tekstit në të bardhë

ngjyra: e bardhë;

dhe shikojeni nën një mikroskop:

Siç mund ta shihni, edhe përmbajtja e bllokut (teksti) tonë është bërë e tejdukshme. Por, çka nëse në praktikë nuk ju intereson transparenca e përmbajtjes, por vetëm transparenca e sfondit? Në këtë rast, kaloni në pikën tjetër.

Përdorimi i imazheve PNG

Një tipar interesant i formatit PNGështë se ka 256 nivele transparence. Unë mendoj se ju keni kapur trenin e mendimit dhe ndoshta keni ndërtuar tashmë një algoritëm se si funksionon kjo qasje. Gjithçka që mund të bëj është ta shpreh.

Si rezultat, ne morëm një bllok me një sfond transparent dhe përmbajtje të errët:

E rëndësishme!!!

1. Ndryshe nga prona errësirë transparenca vendoset vetëm për sfondin
2. Pajtueshmëria me shfletues. Punon pothuajse në të gjithë shfletuesit, gjë që është një plus. Por transparencë PNG nuk mbështetet në IE6. Nëse e optimizoni faqen tuaj për një vjetërsi të tillë, do t'ju duhet të përdorni metoda ose skripta të tjera.
3. Kur fikni shfaqjen e fotografive, sfondi juaj do të zhduket (merreni parasysh këtë pikë kur optimizoni ekranin në pajisjet celulare, sepse interneti i pakufizuar nuk është gjithmonë në dispozicion).
4. Për të ndryshuar ngjyrën dhe/ose shkallën e transparencës, duhet të krijoni një imazh të ri dhe ta ngarkoni atë në server.

Formati i sistemit RGBA

Një nga metodat më moderne të ndryshimit të transparencës së sfondit është përdorimi i sistemit RGBA.

RGBA– Sistemi i paraqitjes së ngjyrave duke përdorur tre kanale standarde RGB(e kuqe, jeshile, blu), dhe e katërta, e ashtuquajtura Alfa-kanali që karakterizon shkallën e transparencës.

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

Në shembullin e njohur tashmë për ne, ne zëvendësojmë përmbajtjen në CSS skedar në sa vijon:

body ( sfond: url (./ vaden- pro- logo. png) ; /* Imazhi i sfondit */) . prozrachen ( mbushje: 10 px; sfond: rgba (0 , 206 , 209 , 0.7 ) ; margjina: 0 automatike; gjerësia: 50%; fonti: 48 px/ 64 px Times New Roman; ngjyra: e bardhë; rreshtimi i tekstit: justify; )

E rëndësishme!!!

1. Ndryshe nga prona errësirë transparenca vendoset vetëm në sfond
2. Ndryshe nga metoda PNG fotot, për të ndryshuar ngjyrën ose shkallën e transparencës duhet vetëm të ndryshojmë vlerat rgba.
3. Pajtueshmëria me shfletues. Punon në të gjithë shfletuesit modernë (nga IE9, Op10, Fx3,Sf3.2).Për shfletuesit më të vjetër ose do të duhet të sakrifikoni transparencën ose të përdorni errësirë, png metodat.

Imazhe me damë, ose në lidhje me historinë

Kjo metodë ishte në origjinën e dizajnit të uebit dhe pa shfletues të vjetër, të vjetër që nuk mund të bënin asgjë. Ai konsiston në krijimin e një sfondi me kuadrate në të cilin katrorët me ngjyra alternohen me ato transparente.

Si rezultat i përdorimit të një imazhi të tillë si sfond, u mor një sfond pseudo-transparent.

E rëndësishme!!!

1. Kur shikoni tekstin në një sfond të tillë, sytë tuaj mund të lodhen shpejt (rrjedhjet kur lëvizni janë veçanërisht shtypëse).
2. Përndryshe, veçoritë e aplikacionit janë të ngjashme me metodën "imazhi PNG".

Le të përmbledhim?

• Nën bllokun transparent duhet të ketë një pamje të ndritshme, jo monotone. Në një sfond monokromatik, kulmi i transparencës humbet.
• Kur zgjidhni një qasje specifike praktike, drejtohuni nga shfletuesit që përdor audienca juaj e synuar. Përputhshmëria ndërmjet shfletuesve është e rëndësishme.

Transparenca CSS - zgjidhje ndër-shfletuesi - 3.8 nga 5 bazuar në 6 vota

Në këtë mësim, ne do të shikojmë transparencën CSS, do të mësojmë se si t'u japim transparencë elementëve të ndryshëm të faqeve dhe të arrijmë pajtueshmërinë e plotë të ndërshfletuesve, d.m.th., ky efekt do të funksionojë njësoj në shfletues të ndryshëm.

Si të vendosni transparencën e çdo elementi

Në CSS3, vetia opacity është përgjegjëse për krijimin e elementeve transparente, të cilat mund të aplikohen në çdo element. Kjo pronë ka vlera nga 0 në 1, të cilat përcaktojnë shkallën e transparencës. Ku 0 është transparencë e plotë (vlera e paracaktuar për të gjithë elementët), dhe 1 është paqartësi e plotë. Vlerat shkruhen si thyesa: 0.1, 0.2, 0.3, etj.

Shembull përdorimi:

Transparenca ndërmjet shfletuesve

Jo të gjithë shfletuesit e perceptojnë dhe zbatojnë vetitë e mësipërme të opacitetit në të njëjtën mënyrë. Në disa raste është e nevojshme të përdorni një emër ose filtra të ndryshëm të pronës.

Vetia e paqartësisë CSS3 mbështetet nga llojet e mëposhtme të shfletuesve: Mozilla 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.

Shumë mirë :) një shfletues si Internet Explorer deri në versionin 9.0 nuk e mbështet veçorinë opacity dhe për të krijuar transparencë për këtë shfletues duhet të përdorni veçorinë e filtrit dhe vlerën alfa(Opacity=X), në të cilën X është një numër i plotë në diapazoni nga 0 në 100, i cili përcakton nivelin e transparencës. 0 është plotësisht transparent dhe 100 është plotësisht i errët.

Që nga Firefox para versionit 3.5, ai mbështet veçorinë -moz-opacity në vend të opacity.

Shfletuesit si Safari 1.1 dhe Konqueror 3.1, të ndërtuar në motorin KHTML, përdorin veçorinë -khtml-opacity për të kontrolluar transparencën.

Si mund ta vendosni transparencën në CSS në mënyrë që të duket e njëjtë në të gjithë shfletuesit? Për të krijuar një zgjidhje ndër-shfletuesi për transparencën e elementit, ata duhet të specifikojnë jo vetëm një veti të opacitetit, por grupin e mëposhtëm të vetive:

filtri: alfa(Opacity=50); /* Transparenca për IE */ -moz-opacity: 0.5; /* Mbështet Mozilla 3.5 dhe më poshtë */ -khtml-opacity: 0.5; /* Mbështet Konqueror 3.1 dhe Safari 1.1 */ opacity: 0.5; /* Mbështet të gjithë shfletuesit e tjerë */

Transparenca e elementeve të ndryshme

Le të shohim disa shembuj të vendosjes së transparencës për disa elementë që përdoren më shpesh në faqe.

Transparenca e imazhit CSS.

Le të shohim disa opsione për krijimin e një fotografie të tejdukshme. Në shembullin e mëposhtëm, imazhi i parë nuk ka transparencë të caktuar, i dyti ka një transparencë prej 50%, dhe i treti ka 30%.

Rezultati:

Transparenca në CSS kur qëndron pezull mbi një imazh.

Shpesh është e nevojshme që një fotografi ose ndonjë element tjetër të bëhet transparent në momentin kur kursori qëndron pezull mbi të. Ju mund ta bëni këtë duke përdorur pseudo-class:hover CSS. Për ta bërë këtë, fotografisë sonë duhet t'i caktohen dy klasa, një normale - kjo do të jetë gjendja joaktive e figurës dhe klasa e dytë me pseudo-klasën: rri pezull, këtu duhet të specifikoni transparencën e figurës për momentin të pezullimit të kursorit.

Ju mund ta shihni rezultatin në demo.

Transparenca e sfondit duke përdorur CSS.

Këtu duhet mbajtur mend se transparenca vlen për të gjithë elementët e mbivendosur dhe ato nuk mund të kenë transparencë më të madhe se elementi i mbivendosur.

Si shembull, do të japim një variant me një sfond faqeje të krijuar duke përdorur një foto dhe një bllok me një sfond të krijuar duke përdorur ngjyra dhe me një transparencë prej 50%.

Shembull i kodit:

Këtu është rezultati i kodit të postuar më lart:

Do t'ju duhet

• - Programi Photoshop
• - një imazh që duhet të ketë një sfond të tejdukshëm.
• - di të krijojë një shtresë të re
• - të jetë në gjendje të përdorë mjetin Fill dhe të vizatojë forma në Photoshop

Udhëzimet

Klikoni dy herë mbi emrin e shtresës me imazhin dhe në fushën që shfaqet shkruani ndonjë emër të ri për këtë shtresë. Kjo është e nevojshme për të lëvizur lirshëm këtë shtresë dhe për të marrë një sfond transparent kur hiqni pjesë të figurës. Nëse imazhi tashmë ka një sfond të errët dhe uniform, atëherë zgjidhni atë me mjetin Magic Wand. Për ta bërë këtë, zgjidhni këtë mjet në shiritin e veglave dhe klikoni në ngjyrën e sfondit, pas së cilës do të zgjidhet gjithçka me ngjyrën që keni specifikuar (në të cilën është klikuar miu) brenda zonës së mbyllur. Fshini përzgjedhjen duke shtypur tastin Delete.

Nëse nuk është uniforme, atëherë zgjidhni vetë foton me veglën "Rectilinear" ose "Pen". Nëse zgjidhni një imazh me mjetin Pen, vendosni shtegun e dëshiruar dhe, nëse është e nevojshme, modifikoni atë me mjetin Pen+. Kur redaktoni me këtë mjet, mund të shtoni pika ankorimi duke klikuar në shtegun e krijuar dhe, duke lëvizur pikat, ta ndryshoni atë. Pastaj, pa hequr kursorin nga shtegu, kliko me të djathtën dhe zgjidh "Krijo përzgjedhjen". Vendosni vlerën e Feather në 0 pixel dhe kontrolloni opsionin Smoothing. Si rezultat i këtyre veprimeve, shtegu do të shndërrohet në një përzgjedhje. Fshini përzgjedhjen duke shtypur tastin Delete.

Krijoni një shtresë të re dhe vendoseni nën shtresën e imazhit. Me kursorin mbi të, klikoni në butonin e majtë të miut dhe, pa e lëshuar butonin, lëvizni kursorin poshtë shtresës me imazhin. Në këtë mënyrë, ju do të tërhiqni një shtresë të re poshtë shtresës së imazhit. Nën vetë imazhin, krijoni një sfond të errët të ngjyrës së dëshiruar dhe formës së dëshiruar.

Ditë të mirë, të rinj të zhvillimit të uebit, si dhe të rinj. Për ata që nuk ndjekin trendet e IT-së, ose më saktë modën në internet, dëshiroj t'ju informoj solemnisht se ky botim me temën: "Si të bëni një bllok transparent me mjetet css" është pikërisht për ju. Në të vërtetë, në vitin aktual 2016, futja e objekteve të ndryshme transparente në shërbimet online konsiderohet si një veprim elegant.

Prandaj, në këtë artikull do t'ju tregoj për të gjitha metodat ekzistuese të krijimit të transparencës, duke filluar nga zgjidhjet paradiluvian, do të përqendrohem në pajtueshmërinë e zgjidhjeve me shfletuesit, dhe gjithashtu do të jap shembuj specifikë të kodit të programit. Tani le të shkojmë në punë!

Metoda 1. Antediluvian

Kur kompjuterët ishin ende të dobët dhe "aftësitë" nuk ishin zhvilluar, zhvilluesit dolën me mënyrën e tyre për të krijuar një sfond transparent: duke përdorur pikselë transparentë nga ana tjetër me ato me ngjyra. Blloku i krijuar në këtë mënyrë dukej si një tabelë shahu kur shkallëzohej, por në madhësi normale i ngjante një lloj transparence.

Kjo, për mendimin tim, "paterica" ​​sigurisht që ndihmon në versionet më të vjetra të shfletuesve në të cilët zgjidhjet moderne nuk funksionojnë. Por vlen të përmendet se cilësia e shfaqjes së tekstit , i gdhendur në të tillë, bie ndjeshëm.

Metoda 2. Nuk shqetësohet

Në raste të rralla, zhvilluesit zgjidhin problemin e prezantimit të një imazhi të tejdukshëm duke futur... një imazh të tejdukshëm të gatshëm! Për këtë qëllim, përdoren imazhet e ruajtura në formatin PNG-24. Ky format grafik ju lejon të vendosni 256 nivele të tejdukshmërisë.

Sidoqoftë, kjo metodë nuk është e përshtatshme për disa arsye:

1. Internet Explorer 6 nuk funksionon me këtë teknologji; ju duhet të shkruani kodin e skriptit për të;
2. Ju nuk mund të ndryshoni ngjyrat e sfondit në css;
3. Nëse funksioni i shfaqjes së imazhit të shfletuesit është i çaktivizuar, ai do të zhduket.

Metoda 3. Promovohet

Mënyra më e zakonshme dhe e njohur për të bërë një bllok transparent është prona errësirë.

Vlera e parametrit ndryshon në intervalin, ku në 0 objekti është i padukshëm dhe në 1 është plotësisht i dukshëm. Megjithatë, edhe këtu ka disa momente të pakëndshme.

Së pari, të gjithë elementët fëmijë trashëgojnë transparencën. Kjo do të thotë që teksti i futur do të "shkëlqejë" së bashku me sfondin.

Së dyti, Internet Explorer përsëri "ngre hundën" dhe, deri në versionin 8, nuk funksionon me errësirë.

Për të zgjidhur këtë problem, përdorni filtri:alfa (Opacity=vlera).

Le të shohim një shembull.

Metoda 4. Moderne

Sot, profesionistët përdorin mjetin rgba (r, g, b, a).

Më parë ju thashë se RGB është një nga modelet më të njohura të ngjyrave, ku R është përgjegjëse për të gjitha nuancat e së kuqes, G për nuancat e jeshiles dhe B për nuancat e blusë.

Në rastin e parametrit css, ndryshorja A është përgjegjëse për kanalin alfa, i cili nga ana tjetër është përgjegjës për transparencën.

Avantazhi kryesor i metodës së fundit është se kanali alfa nuk ndikon në objektet e vendosura brenda bllokut të stilizuar.

rgba(r, g, b, a) mbështetet duke filluar nga:

• Versioni i Operas 10;
• Internet Explorer 9;
• Safari 3.2;
• 3 versione të Firefox-it.

Do të doja të theksoja një fakt interesant! Internet Explorer 7 i dashur hedh një gabim kur kombinon vetitë ngjyrë e sfondit me emrin e ngjyrave (ngjyra e sfondit: e artë). Prandaj, duhet të përdorni vetëm:

ngjyra e sfondit: rgba (255, 215, 0, 0,15)

Dhe tani një shembull.

Vini re se përmbajtja e tekstit të bllokut është plotësisht e dukshme (100% e zezë), ndërsa sfondi është vendosur në një kanal alfa prej 0,88, d.m.th. 88%.

Vetia CSS RGBa ju lejon të vendosni një ngjyrë sfondi me një kanal alfa (d.m.th. të mbushni blloqet me një ngjyrë gjysmë transparente).

Natyrisht, CSS ka një veti opacity, por pengesa kryesore e saj është se të gjithë elementët fëmijë brenda një blloku transparent do të trashëgojnë gjithashtu opacitetin e tij.

Më shpesh, ata përdorin PNG24 me një piksel për të mbushur sfondin e një elementi dhe për të rregulluar transparencën në IE6, ose për ta bërë sfondin transparent duke përdorur opacitetin css. Teksti pozicionohet veçmas në një element tjetër, por kjo, për mendimin tim, nuk është plotësisht e përshtatshme...

Duke përdorur RGBa zgjidhja duket si kjo:

1. Le të themi se na duhet një sfond blu me transparencë 50%.

Por IE6–8, Opera 9.x, Mozilla Firefox 2.x nuk do ta mbështesin atë

2. Për IE, mund të provoni dhe ta bëni atë në mënyrë më elegante:

Shënim: Ngjyra në filtër specifikohet me 8 numra. 2 numrat e parë janë shkalla e transparencës: FF - plotësisht i errët, 00 - transparent. 6 numrat e ardhshëm janë përcaktimi i zakonshëm i ngjyrave HTML.

Përdorimi i RGBa nuk kufizohet vetëm në ngjyrën e sfondit të blloqeve...