Ndonjëherë bëhet e nevojshme të bëhet sfond transparent për një bllok specifik në faqe. Ky efekt mund të arrihet duke krijuar një imazh transparent sfondi në format * .png dhe vendosjen e saj përmes pronës sfondi: url ("./ images / fon.png");.

Përdorimi i pronës OPACITY

Pse kaq shumë kompleksitet kur mund të bëhet me CSS. Le të krijojmë një bllok kryesor në faqe ( faqe) dhe blloku i vendosur ( bllokoj), të cilën ne do ta vendosim transparencën. Përputhshmëria ndërmjet shfletuesit arrihet si më poshtë: pronë për Internet Explorer - filtri: alfa (perde \u003d 50) (vlera e transparencës në intervalin nga 0 në 100), për shfletuesit që mbështesin standardin CSS3 - perde: 0,5 (një numër që varion nga 0,0 deri në 1,0).

Kod HTML:

Rezultati:

Sfond transparent për bllokun

Siç mund ta shihni, transparenca shtrihet tek të gjithë fëmijët.

Sfond transparent për bllokun

në DIV me klasë bllokoj dhe ato nuk mund të tejkalojnë vlerën e transparencës së prindit të tyre. Kjo është, gjithçka në këtë bllok bëhet transparente. Po sikur të doni të lini sfondin transparent vetëm për divin?

Përdorimi i pronës BACKGROUND-COLOR

Ne duhet të bëjmë disa ndryshime në fletën e stileve të CSS, përkatësisht të zëvendësojmë për bllokun DIV me klasë bllokoj pronë errësirë për pronë ngjyrë e sfondit.

Div.bllok (gjerësia: 260px; lartësia: 140px; margin-top: 79px; margin-majtas: 94px; bordura: 1px solid # 333333; / * vetëm sfondi transparent DIV.bllok * / ngjyra-sfondi: rgba (255, 255 , 255, 0.5); / * Ngjyra e sfondit, transparenca 0,5 * /)

Rezultati:

Sfond transparent për bllokun

Në shembullin e mësipërm përdoret për ngjyrën dhe sfondin formati RGBA ... Ku, tre shkronjat e para qëndrojnë për e kuqe, jeshile, blu (e kuqe, jeshile, blu), kjo e fundit simbolizon kanali alfa (a) dhe grupe transparencab element nga 0.0 para 1.0 .

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

Në kllapa, në vend të shkronjave, vendoset vlera e përbërësit të ngjyrës; mund të shikohet në çdo redaktor grafik, për shembull Paint.Net (pamja e ekranit). Vlera e fundit a vendos transparencën dhe përputhet me vlerën e pronës errësirë.

http://cp77.comxa.com/verstka/css-transparent-fon

Prona e CSS errësirë vendos perde e elementit. Perde është shkalla në të cilën përmbajtja fshihet pas një elementi, në krahasim me transparencën.

Burimi për këtë shembull ndërveprues është ruajtur në një depo GitHub. Nëse dëshironi të kontribuoni në projektin e shembujve interaktivë, ju lutemi klononi https://github.com/mdn/interactive-examples dhe na dërgoni një kërkesë tërheqëse.

perde zbatohet për elementin në tërësi, përfshirë përmbajtjen e tij, edhe nëse vlera nuk trashëgohet nga fëmijët. Kështu, një element dhe pasardhësit e tij kanë të njëjtën errësirë \u200b\u200bnë krahasim me sfondin e elementit, edhe pse ata kanë perde të ndryshme në krahasim me njëri-tjetrin.

Përdorimi i errësirës me një vlerë tjetër nga 1 e vendos elementin në një kontekst të ri të mbivendosjes.

Shembuj të

Shembulli themelor

div (sfondi-ngjyra: e verdhë;). drita (errësira: 0,2; / * Teksti mezi i dukshëm në sfond * /). mesatare (perde: 0,5; / * Teksti është më i dukshëm në sfond * /). i rëndë (perde: 0,9 ; / * Teksti është shumë i qartë në sfond * /)

Perde të ndryshme me: rri pezull

img.opacity (perde: 1; filtër: alfa (perde \u003d 100); / * IE8 dhe më poshtë * / zoom: 1; / * "hasLayout" shkakton në IE 7 dhe më poshtë * /) img.opacity: rri pezull (perde: 0..png "alt \u003d" (! LANG: logoja e MDN" width="128" height="146" class="opacity"> !}

Çështjet e aksesit

Nëse errësira e tekstit është e rregullueshme, është e rëndësishme të siguroheni që raporti i kontrastit midis ngjyrës së tekstit dhe sfondit ku është vendosur teksti të jetë mjaft i lartë, në mënyrë që njerëzit me shikim të dobët të lexojnë përmbajtjen e faqes.

Raporti i kontrastit të ngjyrave përcaktohet duke krahasuar shkëlqimin e tekstit me perde të rregulluar dhe vlerën e ngjyrës së sfondit. Për të qenë në përputhje me Udhëzimet aktuale për Mundësinë e Përmbajtjes në Ueb (WCAG), përmbajtja me tekst kërkon një raport prej 4.5: 1 dhe 3: 1 për tekst më të madh siç janë titujt. Teksti i madh përcaktohet si 18,66 px ose më i madh, ose 24 px ose më i madh.

Specifikimet

Vlera fillestare	1.0
Vlen për	të gjithë elementët
I trashëguar	jo
Ekran	vizuale
Trajtimi i vlerës	vlera e specifikuar, e prerë në interval
Lloji i animacionit	janë të ndërfutura si numra të pikave lundruese. "\u003e numri
Rendi kanonik	rend unik i paqartë i përcaktuar nga gramatika zyrtare

Mbështetja e shfletuesit

Tabela e pajtueshmërisë në këtë faqe gjenerohet nga të dhëna të strukturuara. Nëse dëshironi të kontribuoni në të dhënat, shikoni https://github.com/mdn/browser-compat-data dhe na dërgoni një kërkesë tërheqjeje.

Përditësoni të dhënat e përputhshmërisë në GitHub

	Kompjuterët						Mobile
	Krom	Edge	Firefox	Internet Explorer	Opera	Safari	Shikim në internet i Android	Chrome për Android	Firefox për Android	Opera për Android	Safari në iOS	Internet Samsung
errësirë	Krom Mbështetje e plotë 1	Edge Mbështetje e plotë 12	Firefox Mbështetje e plotë 1 Mbështetje e plotë 1 Pa mbështetje 1 - 3.5 Me parashtesë Me parashtesë Kërkon prefiksin e shitësit: -moz-	Dmth Mbështetje e plotë 9	Opera Mbështetje e plotë 9	Safari Mbështetje e plotë 2 Mbështetje e plotë 2 Asnjë mbështetje 1.1 - 2 Me parashtesë Me parashtesë Kërkon prefiksin e shitësit: -khtml-	WebView Android Mbështetje e plotë 1	Chrome Android Mbështetje e plotë 18	Android Firefox Mbështetje e plotë 4	Opera Android Mbështetje e plotë 10.1	Safari iOS Mbështetje e plotë 1	Samsung Internet Android Mbështetje e plotë po
Mbështetje për vlerat e perqindjes së përqindjes	Krom Mbështetje e plotë 78	Edge Asnjë mbështetje Jo	Firefox Mbështetje e plotë 70	IE Jo mbështetje Jo	Opera Asnjë mbështetje Jo	Safari Nuk ka mbështetje Jo	WebView Android Mbështetje e plotë 78	Chrome Android Mbështetje e plotë 78	Firefox Android Nuk ka mbështetje Jo	Opera Android Nuk ka mbështetje Jo	Safari iOS Nuk ka mbështetje Jo	Samsung Internet Android Pa mbështetje Jo

Legjenda

Mbështetje e plotë Mbështetje e plotë Pa mbështetje Pa mbështetje Kërkon prefiksin e shitësit ose emër tjetër për t'u përdorur. Kërkon prefiksin e shitësit ose emër tjetër për t'u përdorur.

Prona CSS 3 errësirë ju lejon të bëni një ose një element tjetër të faqes transparente.

Transparenca e një elementi përcaktohet nga një vlerë nga 0 para 1 Ku 0 - plotësisht transparent a 1 - i errët fare .. Kështu për shembull vlera 0.5 Vetitë errësirë aplikuar në imazh do të thotë që kjo imazh duhet të jetë gjysmë transparente.

Transparenca në IE

Shfletuesi Internet Explorer nuk mbështet veti errësirë deri në versionin e nëntë, megjithatë, ai ka filtrin e tij me të cilin mund të vendosni shkallën e transparencës:

filtri: alfa (perde \u003d 50)

Vlera errësirë për filtrin e shfletuesit Internet Explorer mund të ndryshojë nga 0 - plotësisht transparente për të 100 - i errët

Blloqet e kësaj menuje do të jenë gjysmë transparente edhe në IE !!

shtëpia
harta e faqes
Blini një elefant
Shisni një elefant
Punësoni një elefant

Parashtesat.

Kjo, në parim, mund të përfundojë kapitullin mbi transparencën, por unë do të doja t'ju tregoja më shumë rreth të ashtuquajturës parashtesat e shitësit.. këta shokë nuk kanë shumë të bëjnë me këtë kapitull, megjithatë, gjatë mësimit të CSS3, ata do të ndodhin gjithnjë e më shpesh dhe diku duhet të flisni për ta - kështu që unë do t'ju tregoj këtu.

Pra, prefikset e shitësit janë parashtesa të veçanta të vetive CSS të përdorura nga shfletuesit për vetitë eksperimentale që nuk janë zyrtarisht pjesë e specifikimeve të CSS.

Ne kujtojmë se specifikimi CSS 3 është ende në zhvillim e sipër dhe zyrtarisht vetitë e përshkruara në këtë manual nuk ekzistojnë në natyrë, por shfletuesit tashmë i përdorin ato në mënyrë aktive me rrezikun dhe rrezikun e tyre.

Pse rrezikoni dhe rrezikoni vetë? Po, sepse ekziston mundësia që kur specifikimi CSS 3 të miratohet zyrtarisht, vetitë e përshkruara në të do të ndryshojnë në veprimin e tyre nga vetitë me të njëjtin emër që përdoren tashmë nga shfletuesit. Epo, këtu është marka, le të themi që zhvilluesit e specifikimeve CSS 3 përcaktojnë një pronë errësirë jo si shkalla e transparencës së bllokut, por për shembull si hijezimi ose dridhja e tij (natyrisht po shkruaj pakuptimta), e cila më pas do të shfaqet nga miliona shfletues të instaluar për të cilët errësirë a eshte transparence!?

Ose le të themi që zhvilluesit e shfletuesit kanë dalë me pronën e tyre - një risi që askush tjetër dhe askund nuk e ka, por një dokument me një pronë të tillë nuk kalon kontrollin e vlefshmërisë sepse nuk ka ndonjë pronë të tillë në specifikim.

Për këto dhe arsye të tjera, shfletuesit përdorin parashtesa në fillim të vetive që nuk janë pjesë e specifikimeve zyrtare. Çdo shfletues ka prefiksin e vet duke filluar me shenjën "-", kjo shenjë në fillim të pronës, si dhe kjo shenjë "_", sipas specifikimit të CSS 2.1, do të thotë se prona është e rezervuar për zgjatimet CSS të disa shfletuesve.

Këtu janë shfletuesit më të njohur dhe parashtesat e tyre:

Shfletuesi	Parashtesa
Opera	-o-
Firefox, SeaMonkey, Camino	-moz-
Internet Explorer 8 e lart	-Znj-
Safari deri në versionin 3, Konqueror	-khtml-
Safari 3 e lart, Google Chrome	-ebekit-

Veryshtë shumë e lehtë për t'u përdorur parashtesat, mjafton të marrësh disa prona CSS dhe të zëvendësosh prefiksin e kërkuar për të, për shembull, në një pronë errësirë zëvendësues -moz- doli qe: -moz-perde

Edhe pse në fakt shprehja ime " përdorni parashtesa"Eshte gabim! në fakt, asgjë nuk zëvendësohet askund, vetëm një pronë errësirë , është atje -moz-perde dhe këto janë dy veti të ndryshme që nuk kanë pse të kryejnë të njëjtin funksion !! - kjo duhet kuptuar ..

Dhe gjithashtu duhet të kuptohet që disa shfletues specifik deri në versione të caktuara mund të mbështesin vetitë e CSS vetëm me parashtesat e tyre (përsëri, unë po shpreh gabimisht vetitë e mia - shtesat e CSS të shfletuesit), ose ata mund të mbështeten fillimisht në specifikime të zhvilluara madje. - Ne do të shqyrtojmë secilën rast veç e veç në këtë manual.

Sa i përket këtij kapitulli mbi transparencën, duhet të theksohet se Firefox 3.5 dhe më herët përdorin pronën e tyre -moz-perde , dhe shfletuesi Safari para versionit 1.1 përdor pronën e tij -khtml-errësirë .

Kështu që, për ta bërë shembullin tonë plotësisht në shfletues, duhet të shtojmë edhe disa rreshta në kod:

Siç mund ta shihni, prefikset zgjasin ndjeshëm kodin dhe përdorimi i tyre nuk është gjithmonë i justifikuar nëse versionet e shfletuesve që duan të punojnë me vetitë e caktuara vetëm duke përdorur parashtesat e tyre janë mjaft të vjetra, siç është rasti me pronën errësirë , atëherë nuk mund t'i specifikoni ato .. - edhe pse sigurisht që kjo është këshillë e keqe ..

Tani për disa këshilla të dobishme ..

Përdorni gjithmonë parashtesa (nëse, natyrisht, një shfletues i veçantë nuk mund të bëjë pa to) në rastet kur prona e përdorur mund të ndikojë shumë në performancën, lexueshmërinë dhe përdorshmërinë e faqes. Oneshtë një gjë kur disa gjëra të vogla në hartimin e faqes nuk do të funksionojnë dhe është krejtësisht ndryshe kur, për shembull, menuja e faqes nuk funksionon ose është e pamundur të lexosh tekstin në faqe për shkak të faktit se shfletuesi nuk mbështet ndonjë pronë dhe në vend të kësaj përdor një të vetin e ngjashëm.

/* 06.07.2006 */

Transparenca e CSS (perde e css, errësirë \u200b\u200bjavascript)

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 ndër-shfletuese (e njëjta punë në shfletues të ndryshëm), duke marrë parasysh shfletuesit Firefox, Internet Explorer, Opera, Safari, Konqueror, atëherë ju jeni të mirëpritur. Përveç kësaj, le të shohim një zgjidhje të gatshme për të ndryshuar gradualisht transparencën duke përdorur javascript.

Perde e CSS

Simbioza e errësirës CSS

Me simbiozë, nënkuptoj kombinimin e stileve të ndryshme për shfletues të ndryshëm në një rregull CSS për të marrë efektin e dëshiruar, d.m.th. për zbatimin e ndër-shfletuesit.

Filtri: progid: DXImageTransform.Microsoft.Alpha (perde \u003d 50); / * IE 5,5 + * / -moz-perde: 0,5; / * Mozilla 1.6 dhe më poshtë * / -khtml-perde: 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ë errësirën e CSS3, dhe dy rregullat në mes padyshim që nuk e bëjnë motin, por ato nuk ndërhyjnë vërtet (vendosni vetë nëse keni nevojë për to).

Simbioza e errësirës 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 \u003d getOpacityProperty (); var elem \u003d document.getElementById (sElemId); nëse (! Elem ||! OpacityProp) kthimi; // Nëse nuk ka ndonjë element me id-në e specifikuar, ose shfletuesi nuk mbështet ndonjë nga funksionet e njohura se si të kontrollohet transparenca nëse (opacityProp \u003d\u003d "filtër") // Internet Exploder 5.5+ (nOpacity * \u003d 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 \u003d elem.filters ["DXImageTransform.Microsoft.alpha"] || elem.filtra.alfa; nëse (oAlpha) oAlpha.opacity \u003d nOpacity; tjetër elem.style.filter + \u003d "progid: DXImageTransform.Microsoft.Alpha (perde \u003d" + nOpacity + ")"; // Për të mos mbishkruar filtrat e tjerë, përdorni "+ \u003d" ) tjetër // Shfletuesit e tjerë elem.style \u003d nOpacity; ) funksioni getOpacityProperty () (nëse (typeofofument.body.style.opacity \u003d\u003d "varg") // Në përputhje me CSS3 (Moz 1.7+, Safari 1.2+, Opera 9) kthimi "errësirë"; ndryshe nëse (typeof Document.body.style.MozOpacity \u003d\u003d "string") // Mozilla 1.6 dhe më herët, Firefox 0.8 kthimi "MozOpacity"; ndryshe nëse (type of document.body.style.KhtmlOpacity \u003d\u003d "string") // Konqueror 3.1, Safari 1.1 kthen "KhtmlOpacity"; përndryshe nëse (document.body.filters && navigator.appVersion.match (/ MSIE ([\\ d.] +); /)\u003e \u003d 5.5) // Kthehuni "filtri" në Internet Exploder 5.5+; kthehen false; // pa transparencë }

Funksioni merr dy argumente: sElemId - elementi id, nOpacity - një numër i pikës lundruese nga 0,0 në 1,0 duke specifikuar perde të CSS3.

Mendoj se ia vlen të sqarohet pjesa që lidhet me IE të funksionit setElementOpacity.

Var oAlpha \u003d elem.filters ["DXImageTransform.Microsoft.alpha"] || elem.filtra.alfa; nëse (oAlpha) oAlpha.opacity \u003d nOpacity; tjetër elem.style.filter + \u003d "progid: DXImageTransform.Microsoft.Alpha (perde \u003d" + nOpacity + ")";

Ju mund të pyesni veten pse të mos vendosni transparencën duke i caktuar (\u003d) pronës elem.style.filter \u003d "..."; ? Pse të përdorësh "+ \u003d" për të shtuar një veti filtri në fund të një rreshti? Përgjigja është e thjeshtë, në mënyrë që të mos "mbishkruaj" filtra të 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ë vlerat e vendosura më parë të këtij filtri, por thjesht do të shtohet në fund të vijës së pronës, e cila nuk është e saktë. Prandaj, nëse filtri është instaluar tashmë, atëherë duhet ta manipuloni atë përmes koleksionit të filtrave të aplikuar në elementin: elem.filters (por mbani në mend, nëse filtri nuk i është caktuar akoma elementit, atëherë është e pamundur ta menaxhoni përmes këtij koleksioni). Elementet e koleksionit mund të arrihen ose me emër filtri 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 butë i transparencës së elementit

Zgjidhje e gatshme. Përdorimi i bibliotekës opacity.js

fadeOpacity (this.id, "oR1")"onmouseout \u003d" fadeOpacity.back (this.id)"src \u003d" / img / luleshtrydhe.jpg "gjerësia \u003d" 100 "lartësia \u003d" 80 "/\u003e fadeOpacity (this.id, "oR1")"onmouseout \u003d" fadeOpacity.back (this.id)"src \u003d" / img / tomato.jpg "gjerësia \u003d" 82 "lartësia \u003d" 100 "/\u003e fadeOpacity (this.id, "oR1")"onmouseout \u003d" fadeOpacity.back (this.id)"src \u003d" / img / sweet_cherry.jpg "width \u003d" 98 "lartësia \u003d" 97 "/\u003e

Hapat themelorë:

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 përfundimtare, ose fadeOpacity.back () për tu kthyer në vlerën fillestare të nivelit të transparencës.

Përtyp

Si ta lidh bibliotekën, mendoj se shihet nga shembulli më sipër. Tani ia vlen të shpjegohet përkufizimi i rregullave. Para se të telefononi 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 procesit të ndryshimit të transparencës.

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 - fillimi dhe mbarimi i transparencës, numra në intervalin 0,0 - 1,0;
• nVonimi - vonesë në milisekonda (opsionale, parazgjedhjet në 30).

Ne e quajmë transparencën duke u zbehur vetë përmes metodave fadeOpacity (sElemId, sRuleName), ku sElemId është elementi id dhe sRuleName është emri i rregullit. Metoda fadeOpacity.back (sElemId) përdoret për të kthyer transparencën në gjendjen e saj origjinale.

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

Unë gjithashtu vë në dukje se për një ndryshim të thjeshtë në transparencë (por jo një ndryshim gradual), pseudo-selektori është tamam i duhur : rri pezull, e cila ju lejon të përcaktoni stilet për një element kur rri pezull mbi të.

Ju lutemi vini re se fotografia është vendosur brenda elementit A. Fakti është që Internet Explorer deri në versionin 6 kupton: pseudo-përzgjedhësin e rri pezull, vetëm aplikuar në lidhje, dhe jo në ndonjë element, siç duhet të jetë në CSS (në IE7 situata është rregulluar).

Transparenca dhe teksti i dhëmbëzuar në IE

Me lëshimin e Windows XP, antialiasing i shkronjave të ekranit u shfaq duke përdorur metodën ClearTypedhe bashkë me të efektet anësore në IE kur përdorni këtë metodë anti-aliasing. Në rastin tonë, nëse transparenca zbatohet në një element me tekst kur aktivizohet metoda anti-aliazim ClearType, atëherë teksti ndalet së shfaquri normalisht (teksti i trashë - i guximshëm, për shembull, dyshe, mund të shfaqen edhe objekte të ndryshme, për shembull, në formën e linjave, tekst i dhëmbëzuar). Për të rregulluar situatën, për IE duhet të vendosni ngjyrën e sfondit, vetinë CSS ngjyrë e sfonditelementi në të cilin zbatohet transparenca. Për fat të mirë, IE7 ka rregulluar të metën.

Ditë e mirë, geeks për krijimin e faqeve në internet, si dhe të sapoardhurit e saj. Për ata që nuk ndjekin trendet e fushës IT, ose më saktë modës në internet, dua të njoftoj solemnisht se ky botim me temë: "Si të krijoni një bllok transparent me mjetet css" është vetëm mënyra 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 antediluvian, unë do të përqendrohem në pajtueshmërinë e zgjidhjeve me shfletuesit, dhe gjithashtu të jap shembuj specifik të kodit të programit. Tani hyni në punë!

Metoda 1. Antediluvian

Kur kompjuterat ishin akoma 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 piksele transparente nga ana e tyre me ato me ngjyra. Kështu, blloku i krijuar dukej si një damë kur shkallëzohej, por në madhësinë e tij normale dukej si një lloj transparence.

Kjo, për mendimin tim, "paterica" \u200b\u200bsigurisht ndihmon në versionet e vjetra të shfletuesve në të cilat zgjidhjet moderne nuk funksionojnë. Por duhet theksuar se cilësia e shfaqjes së tekstit , gdhendur në të tilla, bie fort.

Metoda 2. Nuk është e hutuar

Në raste të rralla, zhvilluesit e zgjidhin problemin me prezantimin e një figure gjysmë transparente duke futur ... një foto gjysmë transparente të gatshme! Për këtë, përdoren imazhe të ruajtura në formatin PNG-24. Ky format grafik ju lejon të vendosni 256 nivele të tejdukshmërisë.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

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

1. Internet Explorer 6 nuk punon me këtë teknologji, ju duhet të shkruani kodin e skenarit për të;
2. Impossibleshtë e pamundur të modifikohen ngjyrat e sfondit në css;
3. Nëse funksioni i shfaqjes së imazheve është çaktivizuar në shfletues, ai do të zhduket.

Metoda 3. E pronarit

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ë diapazonin, ku në 0 objekti është i padukshëm, dhe në 1 shfaqet plotësisht. Sidoqoftë, edhe këtu ka disa momente të pakëndshme.

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

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

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

Le të shohim një shembull.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

Metoda 4. Moderne

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

Para kësaj, unë thashë se RGB është një nga modelet më të njohura të ngjyrave, ku R është përgjegjës për të gjitha nuancat e kuqe, G - hije jeshile dhe B - hije blu.

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 brenda bllokut të stiluar.

rgba (r, g, b, a) mbështetet pasi:

• 10 versione të Operës;
• Internet Explorer 9;
• Safari 3.2;
• 3 versione të Firefox.

Unë do të doja të theksoja një fakt interesant! I dashur Internet Explorer 7 hedh një gabim kur ndërthur një pronë ngjyrë e sfondit me emrin e ngjyrave (sfondi-ngjyra: ari). Prandaj, vlen të përdorni vetëm:

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

Tani për një shembull.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

Ju do të gjeni të gjitha llojet e luleve në dyqanin tonë.

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%

Kjo përfundon botimin. Abonohuni në blogun tim dhe mos harroni të ftoni miqtë tuaj. Fat i mirë për të mësuar gjuhë në internet! Mirupafshim!