Vlad Merzheviç

Transparenca e pjesshme, kur përdoret si duhet, duket shumë mbresëlënëse në hartimin e faqes në internet. Gjëja kryesore është që nën blloqet e tejdukshme nuk ka një model me një ngjyrë, por një imazh, në këtë rast transparenca bëhet e dukshme. Ky efekt arrihet në mënyra të ndryshme dhe nëse mbani mend gjithçka, duke përfshirë metodat e modës së vjetër, atëherë ai është duke përdorur një imazh PNG si sfond, duke krijuar një imazh me kuadrate dhe vetinë e opacitetit. Por sapo të bëhet e nevojshme të bëhet një sfond i tejdukshëm në një bllok, këto metoda kanë një dobësi të pakëndshme. Unë do të bëj një pasqyrë të shkurtër në mënyrë që të bëhet e qartë se çfarë është në rrezik, si dhe për ata lexues që nuk janë të njohur me opsionet jokonvencionale për krijimin e efektit të tejdukshmërisë.

PNG si sfond

Një vizatim gjysmëtransparent me një ngjyrë përgatitet paraprakisht në një redaktues grafik, i cili ruhet në formatin PNG-24 (Fig. 1). Një veçori e këtij formati është mbështetja për 256 nivele të transparencës, ose, thënë thjesht, mund të shfaqë imazhe të tejdukshme.

Oriz. 1. Imazhi për krijimin e sfondit

Më pas shtojmë figurën si sfond përmes veçorisë së sfondit, siç tregohet në shembullin 1.

Shembull 1. Përdorimi i një modeli të tejdukshëm

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Rezultati i këtij shembulli është paraqitur në Fig. 3.

Oriz. 2. Aplikimi i një letër-muri

Shfletuesi i vjetëruar Internet Explorer 6 nuk funksionon me tejdukshmëri në PNG-24, nëse për ndonjë arsye është e nevojshme të mbështetni këtë shfletues, do të duhet të përdorni skriptet për të.

Kjo metodë ka një sërë kufizimesh. Pra, kur fikni imazhet në shfletues, sfondi do të zhduket fare. Për më tepër, nuk është aq e lehtë të ndryshosh ngjyrën e sfondit dhe vlerën e transparencës, për këtë do të duhet të modifikosh përsëri imazhin.

Imazhi me kuadrate

Kjo metodë i përket mënyrave shumë të lashta të zbatimit të tejdukshmërisë, kur shfletuesit "nuk mund të bënin asgjë" dhe duhej të kërkonin zgjidhje jokonvencionale. Truku është të krijoni një imazh që alternohet midis pikselëve transparentë dhe të errët (Figura 3). Kjo strukturë e rregullt krijon një efekt të tejdukshëm, në thelb duke e imituar atë.

Oriz. 3. Model me kuadrate te zmadhuara

Kështu duket në fund (Fig. 4).

Oriz. 4. Simulimi i tejdukshmërisë

Disavantazhet e kësaj metode janë të krahasueshme me atë të mëparshme; gjithashtu mund të ndodhë një model moiré dhe teksti përkeqësohet.

Vetia e tejdukshmërisë

Vetia opacity CSS 3 vendos vlerën e opacitetit dhe varion nga 0 në 1, ku zero është transparenca e plotë e elementit dhe një është opake. Vetia e opacitetit ka një veçori të veçantë - transparenca shtrihet për të gjithë fëmijët dhe ata nuk mund të kalojnë vlerën e transparencës së prindit të tyre. Rezulton se nuk mund të ketë tekst të errët në një sfond të tejdukshëm (shembulli 2).

Shembulli 2. Përdorimi i opacitetit

XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx

Rezultati i shembullit është paraqitur në Fig. 5.

Oriz. 5. Transparenca e tekstit dhe sfondit

Në Internet Explorer deri dhe duke përfshirë 8.0, opaciteti nuk funksionon, kështu që përdor veçorinë e filtrit specifik të shfletuesit. Natyrisht, rezulton në CSS të pavlefshme.

RGBA

Qasja moderne është shumë më e thjeshtë dhe më e qartë se metodat e mësipërme dhe konsiston në përdorimin e formatit RGBA për ngjyra dhe sfond. Tre shkronjat e para janë të njohura për shumë njerëz dhe përfaqësojnë të kuqe, jeshile, blu (e kuqe, jeshile, blu), kjo e fundit simbolizon kanalin alfa dhe përcakton transparencën e elementit. Formati i regjistrimit është si më poshtë.

ngjyra e sfondit: rgba (r, g, b, a);

Vlera e komponentit të ngjyrës vendoset në kllapa në vend të shkronjave, mund të shihet në çdo redaktues grafik, vlera e fundit përcakton transparencën dhe përkon me vlerën e vetive të opacitetit.

Jo të gjithë shfletuesit e mbështesin këtë format: Internet Explorer nga versioni 9, Opera nga versioni 10, Firefox nga 3, Safari nga 3.2. Por në përgjithësi, shfletuesit modernë e japin transparencën në mënyrë korrekte. Për versionet më të vjetra të IE, mund të specifikoni veçmas ngjyrën në formatin e zakonshëm, ndërsa, natyrisht, nuk do të ketë transparencë. Ose përsëri, përdorni veçorinë e filtrit, por më pas duhet të duroni edhe transparencën e tekstit (shembulli 3). Për të mbajtur CSS të vlefshme, kam përdorur komente të kushtëzuara.

Shembulli 3. Përdorimi i RGBA

HTML5 CSS3 IE Cr Op Sa Fx

Rezultati i shembullit mund të shihet në Fig. 6.

Oriz. 6. Sfondi gjysmë transparent me tekst opak

Krahasoni foton me atë të mëparshme, shkronjat janë më të ndritshme dhe më të qarta.

Në Internet Explorer 7, u gjet një gabim kur kombinohej ngjyra e sfondit me vlera të ndryshme. Për shembull, nëse vendosni ngjyrën e sfondit në të kuqe, siç tregohet më poshtë, atëherë sfondi në IE7 nuk do të shfaqet fare.

Div (ngjyra e sfondit: e kuqe; / * Nuk zbatohet në IE7 * / ngjyra e sfondit: rgba (255, 0, 0, 0.5);)

Kjo zgjidhet duke zëvendësuar vetinë e ngjyrës së sfondit me sfondin.

Div (sfondi: e kuqe; / * Dhe kjo funksionon * / sfond: rgba (255, 0, 0, 0.5);) Megjithatë, ekziston një paralajmërim. Vlerësuesi CSS "betohet" në sfond nëse i jepet një vlerë në formatin RGBA. Por në të njëjtën kohë i referohet saktë ngjyrës së sfondit. Në përgjithësi, si gjithmonë, ju duhet të zgjidhni midis shfletuesve dhe vlefshmërisë.

Si të vendosni ngjyrën transparente në css? Për momentin, ekzistojnë 3 mënyra për ta bërë këtë.

Metoda 1 - vlera transparente

Nëse e vendosni vlerën e ngjyrës së tekstit ose sfondit në transparente, atëherë ngjyra do të jetë plotësisht transparente, domethënë e padukshme. Shembull:

Ngjyra: transparente;

Një tekst i tillë nuk do të jetë i dukshëm në faqe.

Metoda 2 - modaliteti i ngjyrave rgba

Dhe kjo është tashmë një risi css3. Më parë, nuk kishte një mënyrë të tillë në zhvillimin e uebit, kishte vetëm rgb. Ju ndoshta dini si të shkruani ngjyra në këtë format. Për ta bërë këtë, duhet të specifikoni në kllapa tre vlera nga 0 në 255, duke treguar ngopjen e një prej tre ngjyrave kryesore (e kuqe, jeshile, blu). Për shembull:

Sfondi: rgb (230, 121, 156);

Formati rgba nuk është i ndryshëm, shtohet vetëm një vlerë e katërt - shkalla e transparencës së elementit nga 0 në 1. Në përgjithësi, ky format shënimi përdoret kryesisht për të specifikuar një ngjyrë gjysmë transparente, jo plotësisht transparente. Për të arritur transparencë të plotë, thjesht duhet të shkruani 0 si vlerën e katërt.

Sfondi: rgba (0, 0, 0, 0);

Në këtë rast, 3 shifrat e mbetura nuk luajnë një rol të veçantë.

Ngjyra gjysmë transparente mund të vendoset nëse parametri i katërt vendoset në një vlerë nga 0.01 në 0.99. Tashmë kam shkruar pak për vendosjen e tejdukshmërisë së sfondit, mund ta lexoni nëse jeni të interesuar.

Metoda 3 - errësirë

Një tjetër pronë nga teknologjia css3. Por unë dua t'ju paralajmëroj menjëherë se funksionon pak më ndryshe. Opacity përdoret për të vendosur opacitetin në të gjithë bllokun në të cilin është aplikuar. Kështu, lexueshmëria e tekstit dhe perceptimi i fotografive përkeqësohen. Pra, unë shoh kuptimin për të aplikuar pronën vetëm për blloqet në të cilat nuk ka tekst ose ndonjë informacion tjetër. Vlerat mund të vendosen nga 0 në 1, siç është rasti me parametrin e katërt kur specifikoni një ngjyrë në formatin rgba.

Në përgjithësi, për momentin këto janë të gjitha mënyrat që unë di për të vendosur një ngjyrë transparente në css. Pse është e nevojshme kjo është një pyetje tjetër. Ajo që është poshtë mund të shihet përmes sfondit transparent. Ndonjëherë kjo duhet të bëhet me dizajn. Në përgjithësi, teknika me tejdukshmëri është shumë e zakonshme sot.

Sfondi transparent

Siç e dini ndoshta, sfondi është një pronë css që ju lejon të vendosni një ngjyrë të sfondit ose të ngarkoni një imazh për të vepruar si sfond.

Vendosni transparencën për sfondin css

Pra, kjo është e gjitha shumë e lehtë falë formatit të shënimit të ngjyrave rgba. Nëse punoni me redaktues grafikë, me siguri e dini se modaliteti i ngjyrave rgb nënkupton të kuqe, jeshile dhe blu. Pra, rgba është praktikisht e njëjtë, shtohet vetëm një parametër më shumë - transparenca. Është shkruar kështu:

Ngjyra e sfondit: rgba (173, 57, 22, 0.5)

Së pari, ne tregojmë në mënyrë eksplicite se po e vendosim ngjyrën në modalitetin rgba. Pastaj specifikojmë vlerat e ngopjes së tre ngjyrave kryesore nga 0 në 255, ku 255 është ngopja më e lartë. Parametri i katërt është transparenca jonë. Këtu shkruhet një vlerë nga 0 në një. 1 është plotësisht opake dhe 0 është plotësisht transparente. Prandaj, nëse e vendosni në 0, atëherë ngjyra e sfondit nuk do të jetë fare e dukshme.

Tani ju e dini se si të vendosni transparencën për vetinë e sfondit në css. Për ta bërë këtë, duhet të përdorni modalitetin e ngjyrave rgba. Ekziston edhe vetia e opacitetit, por ajo zbatohet për të gjithë elementin në tërësi. Kjo do të thotë, kur aplikohet opaciteti, transparenca mund të zbatohet edhe në tekst, duke e bërë atë të palexueshëm.

Sfondi transparent për shembull

Përparësitë e një sfondi të tejdukshëm janë të lehta për t'u treguar me një shembull. Për shembull, ne kemi një sfond të përgjithshëm për një faqe. Ja si do të dukej blloku nëse do t'i jepej një ngjyrë e zezë e fortë:

Tani le të vendosim të njëjtën ngjyrë të zezë në bllok, por e tregojmë duke përdorur formatin e ngjyrave rgba, duke specifikuar vlerën e fundit në 0.7, për shembull. Rezulton kështu:

Tani sfondi i bllokut është i dukshëm përmes dhe përmes tij mund të shihni imazhin e sfondit. Kjo foto dhe sfondi janë vetëm për qëllime ilustrimi. Siç mund ta imagjinoni, transparenca në sfondin css mund të jetë e dobishme kur keni nevojë që sfondi i një elementi të mbivendosur të shfaqet pa errësuar sfondet e tjera të vendosura në shtresa të tjera.

Nuk është e vështirë të vendosni vetë ngjyrën duke përdorur rgba. Siç është përmendur tashmë - tre shkronjat e para nënkuptojnë tre ngjyra kryesore: e kuqe, jeshile dhe blu, ose më saktë pjesa e tyre (nga 0 në 255). Duke përshkruar vlera të ndryshme, ju mund të merrni miliona ngjyra të ndryshme, dhe tejdukshmëria do t'ju lejojë të krijoni shumë efekte të bukura për sitin, nëse është e nevojshme.

Dëshironi të mësoni se si të krijoni faqe me një dizajn modern origjinal dhe të gjallë? Përdorimi i elementeve të tejdukshëm mund t'ju ndihmojë në zgjidhjen e kësaj detyre të vështirë. Sot do të shikojmë mënyrat kryesore praktike të vendosjes së transparencës së elementeve strukturorë.

Si mund ta vendos transparencën?

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

• Pronës errësirë.
• Përdorimi Imazhi PNG-imazhe
• Formati i sistemit RGBA
• Dhe së fundi, imazhe të lashtësisë ose me damë.

Vetia CSS Opacity

Aplikim stilimi 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 " >Do të ketë shumë nga teksti juaj

/ * Sfondi për trupin e faqes * /). prozrachen (mbushje: 10px; / * Dhënie për tekstin * / sfond: bruz i errët; / * Vendosni ngjyrën e sfondit * / marzhi: 0 auto; / * Qendër bllokun * / gjerësia: 50%; / * Vendosni gjerësinë e bllokut * / opaciteti: 0.7; / * Vendos transparencën * / fonti: 48px / 64px Times New Roman; text-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 (e errët).
2. Pajtueshmëria me shfletues. V dmth deri në versionin e 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ë një elementi:

   filtri: alfa (Opacity = 70);

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

   • me pozicionim absolut ( pozicioni: absolut)
   • me një dimension linear fiks ( lartësia ose gjerësia).
3. Shkalla e transparencës trashëgohet nga fëmijët, ku transparenca mund të rritet tek fëmija, por nuk mund të zvogëlohet. Dmth, në një sfond të tejdukshëm, mos bëni tekst CLEAR.

Për një kuptim më të mirë të materialit të pikës së fundit, në shembullin e mëparshëm, vendosni tekstin në të bardhë.

ngjyra: e bardhë;

dhe konsiderojeni atë nën një mikroskop:

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

Përdorimi i imazheve PNG

Një tipar interesant i formatit Imazhi 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 për funksionimin e kësaj qasjeje. Më duhet vetëm ta shpreh.

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

E rëndësishme!!!

1. Në ndryshim nga prona errësirë transparenca vendoset vetëm për sfondin
2. Pajtueshmëria me shfletues. Punon pothuajse në të gjithë shfletuesit dhe kjo është një plus. Por transparencë Imazhi PNG nuk mbështetet në IE6... Nëse jeni duke optimizuar 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 transparencën, duhet të krijoni një imazh të ri dhe ta ngarkoni përsëri në server.

Formati i sistemit RGBA

Një nga metodat më moderne për ndryshimin e 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 që e dimë tashmë, le të zëvendësojmë përmbajtjen në CSS skedar në sa vijon:

trupi (sfondi: url (./ vaden- pro- logo. png); / * Wallpapers * /). prozrachen (mbushja: 10 px; sfondi: rgba (0, 206, 209, 0.7); margjina: 0 automatik; gjerësia: 50%; fonti: 48 px / 64 px Times New Roman; ngjyra: e bardhë; rreshtimi i tekstit: justify;)

E rëndësishme!!!

1. Në ndryshim nga prona errësirë transparenca vendoset vetëm për sfondin
2. Ndryshe nga metoda Imazhi PNG fotot, për të ndryshuar ngjyrën ose shkallën e transparencës, mjafton të ndryshojmë vlerat rgba.
3. Pajtueshmëria me shfletues. Punon në të gjithë shfletuesit modernë (duke filluar me IE9, Op10, Fx3,Sf3.2 Shfletuesit e vjetër ose do të duhet të sakrifikojnë transparencën ose të përdorin errësirë, png metodat.

Imazhe me damë, ose respekt për historinë

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

Si rezultat i aplikimit të një fotografie të tillë, u mor një sfond pseudo-transparent si sfond.

E rëndësishme!!!

1. Kur shikoni tekst në një sfond të tillë, sytë mund të lodhen shpejt (veçanërisht valëzimet kur lëvizni shtypni poshtë).
2. Pjesa tjetër e veçorive të aplikacionit janë të ngjashme me metodën "PNG-pictures".

Le të përmbledhim?

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

Klasa 1 Klasa 2 Klasa 3 Klasa 4 Klasa 5

Detaje Kategoria: Web Designer Autor: SEO & WEB - KELL4

Krijoni një sfond transparent në HTML dhe CSS (paqartësi dhe efekte RGBA)

Efekti i tejdukshmërisë elementi është qartë i dukshëm në imazhin e sfondit dhe është bërë i përhapur në sisteme të ndryshme operative, sepse duket elegant dhe i bukur. Gjëja kryesore nuk është të ketë një model monokromatik nën blloqet e tejdukshme, por një imazh, është në këtë rast që transparenca bëhet e dukshme.

Ky efekt arrihet në mënyra të ndryshme, duke përfshirë teknikat e modës së vjetër si përdorimi i një imazhi PNG si sfond, krijimi i një imazhi me kuadrate dhe veçoria e opacitetit. Por sapo të bëhet e nevojshme të bëhet një sfond i tejdukshëm në një bllok, këto metoda kanë anët negative të pakëndshme.

Merrni parasysh tejdukshmërinë e tekstit dhe sfondit - si ta përdorni atë saktë në hartimin e faqes në internet:

Tipari kryesor i kësaj prone është se vlera e transparencës prek të gjithë fëmijët brenda, jo vetëm sfondin. Kjo do të thotë që si sfondi ashtu edhe teksti do të bëhen të tejdukshëm. Mund të rrisni nivelin e transparencës duke ndryshuar komandën e opacity nga 0.1 në 1.

HTML 5 CSS 3 IE 9

Në dizajnin e uebit, transparenca e pjesshme zbatohet dhe arrihet edhe përmes formatit të ngjyrave RGBA, i cili vendoset vetëm për sfondin e një elementi.

Në mënyrë tipike, në dizajne, vetëm sfondi i një elementi duhet të jetë i tejdukshëm dhe teksti duhet të jetë i errët për të ruajtur lexueshmërinë. Vetia e opacitetit është e papërshtatshme këtu sepse teksti brenda elementit do të jetë gjithashtu pjesërisht transparent. Është mirë të përdoret formati RGBA, pjesë e të cilit është kanali alfa, ose me fjalë të tjera vlera e transparencës. Vlera shkruhet rgba, më pas vlerat e përbërësve të ngjyrës së kuqe, blu dhe jeshile renditen në kllapa të ndara me presje. E fundit është transparenca, e cila vendoset nga 0 në 1, ku 0 është transparencë e plotë dhe 1 është ngjyra opake për sintaksën rgba.

Sfondi i tejdukshëm HTML 5 CSS 3 IE 9

Opaciteti i sfondit është caktuar në 90% - Sfondi gjysmë transparent dhe tekst i errët.

Transparenca në CSS ka qenë një teknikë mjaft e modës kohët e fundit dhe po shkakton vështirësi në zbatimin e ndërshfletuesve. Deri më tani, nuk ka asnjë metodë të vetme për zbatimin e transparencës në të gjithë shfletuesit. Megjithatë, kohët e fundit, situata është përmirësuar dukshëm.

Ky artikull hedh një vështrim të detajuar në qasjet ekzistuese dhe ofron shembuj dhe shpjegime të kodit për t'ju ndihmuar të arrini të njëjtin rezultat në të gjithë shfletuesit me përpjekje minimale.

Një pikë tjetër që vlen të përmendet është se megjithëse transparenca ekziston prej disa vitesh, ajo kurrë nuk ka qenë pjesë e standardit CSS. Kjo është një pronë jo standarde dhe duhet të jetë pjesë e specifikimit CSS3.

Qasje e vjetër

Në versionet më të vjetra të Firefox-it dhe Safari-t, duhet të aplikoni veçorinë si kjo:

#myElement (-khtml-opacity: .5; -moz-opacity: 0.5;)

Vetia -khtml-opacity është përdorur në versionet më të vjetra të shfletuesve të uebkit. Kjo pronë është e vjetëruar dhe nuk është më e nevojshme nëse nuk jeni i sigurt se një pjesë e konsiderueshme e trafikut të faqes suaj vjen nga vizitorë që përdorin Safari 1.x, gjë që sigurisht nuk ka gjasa.

Rreshti tjetër përdor veçorinë -moz-opacity që funksionoi në versionet shumë të hershme të motorit Mozilla. Firefox përfundoi mbështetjen për të në versionin 0.9.

Transparenca CSS në Firefox, Safari, Chrome dhe Opera

Për shumicën e shfletuesve modernë, vetia e mëposhtme është e mjaftueshme:

#myElement (opacity: .7;)

Në shembullin e mësipërm, elementi është vendosur në një vlerë të patejdukshmërisë prej 70% (30% errësirë). Kjo do të thotë, nëse e vendosim vlerën në një, atëherë elementi do të jetë i errët, dhe, në përputhje me rrethanat, vendosja e kësaj vlere në zero do ta bëjë atë të padukshëm.

Vetia opacity trajton 2 shifra dhjetore. Kjo do të thotë, vlera ".01" do të ndryshojë nga vlera ".02", megjithëse nuk është shumë e dukshme.

Transparenca CSS për Internet Explorer

Si zakonisht, Internet Explorer nuk është në kushte miqësore me shfletuesit e tjerë. Përveç kësaj, ne tani kemi tre versione të këtij shfletuesi në përdorim mjaft të përhapur, vendosja e transparencës në secilën prej të cilave është e ndryshme dhe ndonjëherë kërkon përpjekje shtesë për të marrë një rezultat pozitiv.

#myElement (filtri: alfa (opacity = 40);)

Ky shembull përdor veçorinë e filtrit, e cila funksionon në versionet 6-8, por ka një kufizim për versionet 6 dhe 7: elementi duhet të ketë vetinë hasLayout të caktuar në true. Kjo pronë është e pranishme vetëm në IE dhe mund të lexoni më shumë rreth saj, për shembull, në Habré.

Një mënyrë tjetër për të vendosur transparencën duke përdorur CSS në IE8 është përdorimi i qasjes së mëposhtme (vini re komentet):

#myElement (filtri: progid: DXImageTransform.Microsoft.Alpha (opacity = 40); / * punon në IE6, IE7 dhe IE8 * / -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (opacity = 40)"; / * Vetëm IE8 * /)

Linja e parë do të funksionojë në të gjitha versionet aktualisht në përdorim, e dyta vetëm në IE8. Vini re se rreshti i dytë përdor prefiksin -ms- dhe vlera është cituar.

Vendosja dhe ndryshimi i transparencës CSS duke përdorur JavaScript ose jQuery

Ju mund të përdorni kodin e mëposhtëm për të vendosur transparencën:

Document.getElementById ("myElement"). Style.opacity = ".4"; // për shumicën e shfletuesve document.getElementById ("myElement"). style.filter = "alfa (opacity = 40)"; // për IE

Sigurisht, në këtë rast është shumë më e lehtë të përdoret jQuery, përveç kësaj, do të funksionojë në të gjithë shfletuesit:

$ ("# myElement"). css ((opacity: .4)); // funksionon në të gjithë shfletuesit

Ju mund ta animoni këtë pronë:

$ ("# myElement") animate ((opacity: .4), 1000, funksioni () (// Animacioni i përfunduar; ky kod funksionon në të gjithë shfletuesit.));

Funksioni RGBA

Është planifikuar të mbështesë kanalin alfa në CSS3 duke përdorur funksionin rgba. Ky funksion funksionon në Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+. Përdoret si kjo:

#rgba (sfondi: rgba (98, 135, 167, .4);)

Në këtë rast, parametri i fundit tregon nivelin e opacitetit.

Funksioni HSLA

Ngjashëm me funksionin e mëparshëm, CSS3 gjithashtu ju lejon të vendosni një ngjyrë gjysmë transparente duke përdorur funksionin HSLA, parametrat e të cilit janë Hue, Saturation, Lightness dhe Alpha channel (Alpha).

#hsla (sfondi: hsla (207, 38%, 47%, .4);)

Një pikë e rëndësishme kur përdorni funksionet rgba dhe hsla është se cilësimi i opacitetit nuk zbatohet për elementët fëmijë, ndërsa vetia e opacity trashëgohet.