Vlad Merzheviç

Efekti i tejdukshmërisë së elementit është qartë i dukshëm në imazhin e sfondit dhe është bërë i përhapur në të ndryshme sistemet operative sepse duket me stil dhe bukur. Në dizajnin e uebit, tejdukshmëria zbatohet dhe arrihet gjithashtu përmes veçorisë së opacity, ose formatit të ngjyrave RGBA që është caktuar për sfond.

Blloku i gradientit

Bëni bllokun e treguar në fig. 1. Blloku përmban një kornizë gradient gjysmë transparent me një sfond gradient nën titull dhe një tregues të vogël. Sfondi në faqe shfaqet vetëm për qartësinë e efektit të tejdukshmërisë, ju mund të specifikoni ndonjë nga imazhet tuaja. Lartësia minimale e bllokut është 100 px.

Si ta bëj një shtresë gjysmë transparente?

Për të ndryshuar transparencën e një elementi, aplikoni stilin vetia e tejdukshmërisë me një vlerë nga 0 në 1, ku 0 korrespondon me transparencën e plotë, dhe 1, përkundrazi, me patransparencën e objektit. Në shfletuesin Internet Explorer kjo veçori nuk funksionon, kështu që ju duhet të përdorni filtrin posaçërisht për të, një veti që nuk është pjesë e specifikimit CSS. Shembulli 1 tregon se si të vendosni transparencën e shtresave për të gjithë shfletuesit.

Sfondi i tejdukshëm

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 menyra te ndryshme Dhe nëse mbani mend gjithçka, duke përfshirë metodat e modës së vjetër, atëherë ai po përdor 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ë të pakëndshme ndërro anë... une do ta bej pasqyrë e vogël për ta bërë të qartë se çfarë në fjalë, si dhe për ata lexues që nuk janë të njohur me opsionet jokonvencionale për krijimin e një efekti të tejdukshëm.

Si ta vendosni tabelën në gjysmë transparente, por disa nga qelizat nuk janë?

Për të ndryshuar transparencën e një elementi në CSS3, jepet vetia e opacitetit, vlera e saj mund të ndryshojë nga 0 në 1. Zero korrespondon me transparencën e plotë të elementit, dhe një, përkundrazi, me opacitetin. Shfletuesit modernë punojnë mjaft saktë me këtë pronë, me përjashtim të Shfletuesi i internetit Explorer, kështu që për të duhet të përdorni një veti të veçantë filtri me vlerën alfa (Opacity = X), ku X mund të ndryshojë nga 0 në 100.

/* 06.07.2006 */

Transparenca CSS (opaciteti css, paqartësia e Javascript)

Transparenca është tema e këtij artikulli. Nëse jeni të interesuar se si t'i bëni elementët e faqes html transparente duke përdorur CSS ose Javascript dhe si të arrini sjelljen e ndërshfletuesve (e njëjta punë në shfletues të ndryshëm) duke marrë parasysh shfletuesit Firefox, Internet Explorer, Opera, Safari, Konqueror, atëherë ju janë të mirëseardhur. Përveç kësaj, merrni parasysh zgjidhje e gatshme duke ndryshuar gradualisht transparencën duke përdorur javascript.

Opaciteti i CSS

Simbioza e opacitetit të CSS

Me simbiozë nënkuptoj unifikimin stile të ndryshme për shfletues të ndryshëm në një Rregulli CSS për marrjen efektin e dëshiruar, d.m.th. për zbatimin e ndërshfletuesve.

Filtri: progid: DXImageTransform.Microsoft.Alpha (opacity = 50); / * IE 5.5 + * / -moz-opacity: 0.5; / * Mozilla 1.6 dhe më poshtë * / -khtml-opacity: 0.5; / * Konqueror 3.1, Safari 1.1 * // * CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 * /

Në fakt, rregullat e para dhe të fundit janë të nevojshme, për IE5.5 + dhe shfletuesit që kuptojnë opacitetin e CSS3, dhe dy rregullat në mes padyshim që nuk bëjnë dallimin, por ato nuk ndërhyjnë në të vërtetë (vendosni vetë nëse keni nevojë ato).

Simbioza e opacitetit të Javascript

Tani le të përpiqemi të vendosim transparencën përmes një skenari, duke marrë parasysh veçoritë e shfletuesve të ndryshëm të përshkruar më sipër.

Funksioni setElementOpacity (sElemId, nOpacity) (var opacityProp = getOpacityProperty (); var elem = document.getElementById (sElemId); nëse (! Elem ||! OpacityProp) kthehet; // Nëse elementi me ID-në e specifikuar nuk ekziston ose shfletuesi nuk mbështet ndonjë nga funksionet e njohura se si të kontrollohet transparenca nëse (opacityProp == "filtër") // Internet Exploder 5.5+ (nOpacity * = 100; // Nëse transparenca është vendosur tashmë, atëherë ndryshojeni atë përmes koleksionit të filtrave, përndryshe shtoni transparencë përmes style.filter var oAlpha = elem.filtrat ["DXImageTransform.Microsoft.alpha"] || elem.filtrat.alfa; nëse (oAlfa) oAlfa.opacity = nOpacity; else elem.style.filter + = "progid: DXImageTransform.Microsoft.Alpha (opacity =" + nOpacity + ")"; // Për të mos mbishkruar filtra të tjerë, përdorni "+ =") tjetër // Shfletues të tjerë elem.stil = nOpacity; ) funksioni getOpacityProperty () (nëse (lloji i dokumentit.body.style.opacity == "string") // Në përputhje me CSS3 (Moz 1.7+, Safari 1.2+, Opera 9) kthimi "opacity"; else if (lloj document.body.style.MozOpacity == "string") // Mozilla 1.6 dhe më herët, Firefox 0.8 kthimi "MozOpacity"; other if (lloj document.body.style.KhtmlOpacity == "string") // Konqueror 3.1, Safari 1.1 kthen "KhtmlOpacity"; ndryshe nëse (document.body.filters && navigator.appVersion.match (/ MSIE ([\ d.] +); /)> = 5.5) // Internet Exploder 5.5+ kthen "filtër"; kthej false; // pa transparencë }

Funksioni merr dy argumente: sElemId - ID-ja e elementit, nOpacity - një numër me pikë lundruese nga 0.0 në 1.0 që specifikon opacitetin e CSS3.

Unë mendoj se mund të jetë me vlerë të sqarohet pjesa e lidhur me IE të funksionit setElementOpacity.

Var oAlpha = elem.filtra ["DXImageTransform.Microsoft.alpha"] || elem.filtrat.alfa; nëse (oAlfa) oAlfa.opacity = nOpacity; else elem.style.filter + = "progid: DXImageTransform.Microsoft.Alpha (opacity =" + nOpacity + ")";

Ju mund të pyesni veten pse të mos vendosni transparencë duke caktuar (=) në elem.style.filter = "..."; ? Pse të përdorni "+ =" për të shtuar një veçori filtri në fund të një rreshti? Përgjigja është e thjeshtë, për të mos “mbishkruar” filtrat e tjerë. Por në të njëjtën kohë, nëse shtoni një filtër në këtë mënyrë për herë të dytë, atëherë ai nuk do të ndryshojë më herët vendos vlerat të këtij filtri, por thjesht do të shtohet në fund të linjës së vetive, gjë që nuk është e saktë. Prandaj, nëse filtri është instaluar tashmë, atëherë duhet ta manipuloni përmes koleksionit të filtrave të aplikuar në element: elem.filters (por kini parasysh, nëse filtri nuk i është caktuar ende elementit, atëherë menaxhoni atë përmes këtë koleksion e pamundur). Elementet e koleksionit mund të aksesohen ose me emrin e filtrit ose me indeks. Sidoqoftë, filtri mund të specifikohet në dy stile, stili i shkurtër IE4 ose stili IE5.5 +, i cili merret parasysh në kod.

Ndryshimi i qetë i transparencës së elementit

Zgjidhje e gatshme. Duke përdorur bibliotekën opacity.js

fadeOpacity (this.id, "oR1")"onmouseout =" fadeOpacity.back (this.id)"src =" / img / strawberry.jpg "width =" 100 "lartësi =" 80 "/> fadeOpacity (this.id, "oR1")"onmouseout =" fadeOpacity.back (this.id)"src =" / img / tomato.jpg "width =" 82 "height =" 100 "/> fadeOpacity (this.id, "oR1")"onmouseout =" fadeOpacity.back (this.id)"src =" / img / sweet_cherry.jpg "width =" 98 "height =" 97 "/>

Hapat bazë:

1. Ne lidhim bibliotekën e funksioneve;
2. Ne përcaktojmë rregullat duke përdorur metodën fadeOpacity.addRule ();
3. Thirrja e metodës fadeOpacity () për të ndryshuar transparencën nga vlera fillestare në vlerën e fundit, ose fadeOpacity.back () për t'u kthyer në vlera fillestare niveli i transparencës.

Përtypni

Si të lidhni bibliotekën, mendoj se mund të shihet nga shembulli i mësipërm. Tani ia vlen të sqarohet përkufizimi i rregullave. Para se të thirrni metodat për ndryshimin e qetë të transparencës, duhet të përcaktoni rregullat me të cilat do të ekzekutohet procesi: duhet të përcaktoni transparencën fillestare dhe përfundimtare, dhe gjithashtu, nëse dëshironi, të specifikoni parametrin e vonesës që ndikon në shpejtësinë e transparencës. procesi i ndryshimit.

Rregullat përcaktohen duke përdorur metodën fadeOpacity.addRule

Sintaksë: fadeOpacity.addRule (sRuleName, nStartOpacity, nFinishOpacity, nDalay)

Argumentet:

• sRuleName - emri i rregullit, i vendosur në mënyrë arbitrare;
• nStartOpacity dhe nFinishOpacity - transparenca e fillimit dhe e përfundimit, numrat në rangun nga 0.0 në 1.0;
• nDelay - vonesë në milisekonda (opsionale, e paracaktuar në 30).

Vetë zbehja e transparencës quhet përmes metodave fadeOpacity (sElemId, sRuleName), ku sElemId është id i elementit dhe sRuleName është emri i rregullit. Për të kthyer transparencën në gjendjen fillestare përdoret metoda fadeOpacity.back (sElemId).

: rri pezull për të ndryshuar lehtësisht transparencën

Unë gjithashtu vërej se për një ndryshim të thjeshtë të transparencës (por jo një ndryshim gradual), pseudo-zgjedhësi është i duhuri : rri pezull, i cili ju lejon të përcaktoni stilet për një element kur rri pezull mbi të.

Vini re se fotografia është vendosur brenda elementit A. Fakti është se Internet Explorer deri në versionin 6 kupton: pseudo-zgjedhësin e pezullimit, vetëm aplikohet në lidhje, dhe jo në ndonjë element, siç duhet të jetë në CSS (në IE7 situata është e rregulluar).

Transparenca dhe teksti i dehur në IE

ME Lëshimi i Windows XP prezantoi anti-aliasing fontet e ekranit metodë Cleartype dhe bashkë me të edhe efektet anësore në IE gjatë përdorimit të kësaj metode anti-aliasing. Në rastin tonë, nëse transparenca zbatohet në një element me tekst kur është aktivizuar metoda anti-aliasing ClearType, atëherë teksti ndalon së shfaquri normalisht (tekst me shkronja të zeza - të guximshme, për shembull, dyshe, mund të shfaqen edhe objekte të ndryshme, për shembull, në formën e rreshtave, tekstit të dehur). Për të rregulluar situatën, për IE duhet të vendosni ngjyrë e sfondit, Vetia CSS ngjyrë e sfondit, elementi për të cilin zbatohet transparenca. Për fat të mirë, IE7 e ka rregulluar gabimin.

Transparenca në CSS është një teknikë mjaft e modës në Kohët e fundit gjë që shkakton vështirësi në zbatimin e ndërshfletuesve. Ende nuk ekziston metodë universale që do të mundësonte transparencë për 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 kodesh dhe shpjegime 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ë të vjetër Versionet e Firefox-it dhe Safari duhet të aplikojë pronën 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.

V rreshti tjetër përdori veçorinë -moz-opacity e cila funksionoi për shumë versionet e hershme Motori 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ë, mjafton të përdoret pronë e radhës:

#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 tejdukshmërisë.

Funksioni HSLA

si funksioni i 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.

#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 opacitetit trashëgohet.

Si të vendosni ngjyrë 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, në ky moment këto janë të gjitha mënyrat që unë di për vendosjen e një ngjyre 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 jeni duke punuar me redaktorët grafikë atëherë ju ndoshta e dini këtë modaliteti i ngjyrave rgb do të thotë e 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 sfond i përgjithshëm faqet. 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 dhe i dukshëm përmes tij foto sfondi... 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.

Vendosni vetë ngjyrën me duke përdorur rgba jo e vështirë. 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). Receta kuptime të ndryshme ju mund të merrni miliona ngjyra të ndryshme, dhe tejdukshmëria do t'ju lejojë të gjeni shumë më tepër efekte të bukura për sitin, nëse është e nevojshme.

Pronës Opaciteti i CSS përgjegjës për transparencën e elementeve (imazhe, tekst, blloqe) në html.

Sintaksa e opacitetit të CSS

Ku vlera mund të marrë vlera reale në rangun nga 0.0 në 1.0. Një vlerë prej 1.0 do të thotë pa transparencë (parazgjedhje).

Shembulli # 1. Imazhi transparent në html

Imazhi i parë shfaqet pa transparencë, i dyti me transparencë 0,5

Transparenca e elementit

Duke e bërë imazhin gjysmë transparent në hover!

Burimi DemoShkarko

Faleminderit per vemendjen!

Artikulli tjetër
Si të krijoni bllok div me lëvizje?