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

Metoda 1 - vlera transparente

Nëse e vendosni ngjyrën e tekstit ose të sfondit në transparente, ngjyra do të jetë plotësisht transparente, pra 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 tashmë është një risi css3. Më parë, nuk kishte një mënyrë të tillë në zhvillimin e uebit, kishte vetëm rgb. Me siguri ju dini si të shkruani ngjyra në këtë format. Për ta bërë këtë, duhet të specifikoni tre vlera në kllapa 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ë vendosur një ngjyrë gjysmë transparente, dhe jo plotësisht transparente. Për të arritur transparencë të plotë, duhet vetëm të shkruani 0 si vlerë të katërt.

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

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

Një ngjyrë e tejdukshme mund të vendoset nëse parametri i katërt vendoset në një vlerë nga 0.01 në 0.99. O tashmë ka shkruar pak për vendosjen e tejdukshmërisë për sfondin në , 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. Me opacitet, transparenca vendoset në të gjithë bllokun në të cilin aplikohet. Kështu, lexueshmëria e tekstit dhe perceptimi i fotografive përkeqësohen. Kështu që e shoh qëllimin në përdorimin e pronës vetëm për blloqe në të cilat nuk ka tekst dhe disa informacione të tjera. Vlerat mund të vendosen nga 0 në 1, si në rastin e parametrit të 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. Nëpërmjet një sfondi transparent, mund të shihet ajo që është nën të. Ndonjëherë duhet të bëhet në këtë mënyrë me dizajn. Në përgjithësi, teknika me tejdukshmëri është shumë e zakonshme sot.

Sfondi transparent (sfondi)

Siç mund ta dini, sfondi është një veti CSS që ju lejon të vendosni ngjyrën e sfondit ose të ngarkoni një imazh që të veprojë si sfond.

Vendosni transparencën për sfondin css

Pra, e gjithë kjo bëhet shumë thjesht falë një formati të tillë regjistrimi me ngjyra si rgba. Nëse punoni me redaktues grafikë, me siguri e dini se modaliteti i ngjyrave rgb deshifrohet si më poshtë: proporcioni i ngjyrës së kuqe (e kuqe), përqindja e gjelbër (jeshile) dhe blu (blu). Pra, rgba është pothuajse e njëjtë, është shtuar 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 ne tregojmë 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 vlera shkruhet nga 0 në një. 1 është një element plotësisht i errët dhe 0 është një element plotësisht transparent. 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 gjithashtu një veti opacity, por ajo zbatohet për të gjithë elementin në tërësi. Domethënë, kur aplikohet opaciteti, teksti mund të zbatohet edhe transparencë, gjë që do ta bëjë atë të palexueshëm.

Shembull i sfondit transparent

Përfitimet 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 të faqes. Ja si do të dukej blloku nëse do t'i jepej një ngjyrë e zezë e fortë:

Dhe tani le të vendosim të njëjtën ngjyrë të zezë në bllok, por ta specifikojmë duke përdorur formatin e ngjyrave rgba, duke specifikuar vlerën e fundit si 0.7, për shembull. Do të dalë kështu:

Tani sfondi i bllokut është i tejdukshëm dhe imazhi i sfondit është i dukshëm përmes tij. Kjo foto dhe sfondi janë vetëm për qëllime ilustrimi. Siç e kuptoni, 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.

Vetë ngjyra nuk është e vështirë për t'u vendosur duke përdorur rgba. Siç është përmendur tashmë, tre shkronjat e para nënkuptojnë tre ngjyrat kryesore: e kuqe, jeshile dhe blu, ose më mirë pjesa e tyre (nga 0 në 255). Duke vendosur 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.

Klasa 1 Klasa 2 Klasa 3 Klasa 4 Klasa 5

Detaje Kategoria: web designer Autori: SEO & WEB - KELL4

Krijimi i një sfondi transparent në HTML dhe CSS (opaciteti dhe efektet 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 është që të mos ketë një model me një ngjyrë, por një imazh nën blloqet e tejdukshme, në këtë rast transparenca bëhet e dukshme.

Ky efekt arrihet në mënyra të ndryshme, duke përfshirë teknikat e modës së vjetër, të tilla si përdorimi i një imazhi PNG si sfond, krijimi i një imazhi me kuadrate dhe përdorimi i vetive të opacitetit. Por, sapo të bëhet e nevojshme të bëhet një sfond i tejdukshëm në 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 veçorie është se vlera e transparencës prek të gjithë elementët fëmijë 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 përdoret gjithashtu dhe arrihet përmes formatit të ngjyrave RGBA, i cili vendoset vetëm për sfondin e elementit.

Zakonisht në një dizajn, vetëm sfondi i një elementi duhet të jetë i tejdukshëm dhe teksti duhet të jetë i errët për ta mbajtur atë të lexueshëm. Vetia e opacitetit nuk përshtatet 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ë kuq, blu dhe jeshil të ngjyrës renditen në kllapa të ndara me presje. E fundit vjen transparenca, e cila vendoset nga 0 në 1, ku 0 është plotësisht transparente dhe 1 është opake, sintaksa për aplikimin e rgba.

Sfondi gjysmë transparent HTML 5 CSS 3 IE 9

Vlera e errësirës për sfondin është vendosur në 90% - një sfond i tejdukshëm dhe tekst i errët.

Në këtë mësim, ne do t'i hedhim një sy këtyre css Vetitë - errësirë Dhe RGBA. Pronës Opacitetiështë përgjegjës vetëm për transparencën e elementeve dhe funksionit RGBA- për ngjyrën dhe transparencën, nëse specifikoni vlerën e transparencës së kanalit alfa.

Opaciteti i CSS

Vlera numerike për errësirë vendosur në rangun nga 0.0 në 1.0, ku zero është transparencë e plotë, dhe një, përkundrazi, është errësirë ​​absolute. Për shembull, për të parë transparencë 50%, duhet të vendosni vlerën në 0.5. Duhet pasur parasysh se errësirë përhapet tek të gjithë elementët fëmijë të prindit. Dhe kjo do të thotë që teksti në një sfond të tejdukshëm do të jetë gjithashtu i tejdukshëm. Dhe kjo tashmë është një pengesë shumë domethënëse, teksti nuk bie aq mirë në sy.

Pamja e ekranit tregon qartë se teksti i zi është bërë po aq i tejdukshëm sa sfondi blu.

Div(
sfondi: url(imazhet/image.jpg); /* Imazhi i sfondit */
gjerësia: 750 px
lartësia: 100 px;
diferencë: auto;
}
.blu(
sfond: #027av4; /* Ngjyra e tejdukshme e sfondit */
tejdukshmëria: 0.3 /* Vlera e tejdukshmërisë së sfondit */
lartësia: 70 px;
}
h1(
mbushje: 6 px
font-familja: Arial Black;
pesha e shkronjave: më e theksuar;
madhësia e shkronjave: 50 px;
}

Transparenca CSS në formatin RGBA

Formati për ngjyrën e shkrimit RGBA, eshte nje alternative me moderne per pronen errësirë. R (e kuqe), G (jeshile), B (blu) do të thotë: e kuqe, jeshile, blu. letra e fundit A- nënkupton kanalin alfa, i cili përcakton transparencën. RGBA Ndryshe nga Opaciteti nuk ndikon në elementet e fëmijës.

Tani le të shohim shembullin tonë duke përdorur RGBA. Le t'i zëvendësojmë këto rreshta në stile.

Sfondi: ##027av4; /* Ngjyrë e sfondit */
tejdukshmëria: 0.3 /* vlera e tejdukshmërisë së sfondit */

në rreshtin tjetër

Sfondi: rgba(2, 127, 212, 0.3);

Siç mund ta shihni, vlera e transparencës prej 0.3 është e njëjtë për të dyja metodat.

Rezultati i shembullit RGBA:

Pamja e dytë e ekranit duket shumë më e mirë se e para.

Duke luajtur me tejdukshmërinë e sfondit të blloqeve, mund të arrini efekte interesante në sit. Është e rëndësishme që këto blloqe të tejdukshme të shkojnë në krye të një modeli shumëngjyrësh, siç është një fotografi. Vetëm në këtë rast efekti do të jetë i dukshëm. Kjo teknikë është përdorur në dizajn për një kohë të gjatë, madje edhe para ardhjes së ndonjë CSS3, u zbatua thjesht në programe grafike.

Nëse klienti kërkon që faqosja të duket e mirë në versionet më të vjetra të shfletuesit Internet Explorer pastaj shtoni pronë filtër dhe mos harroni të komentoni në mënyrë që vlefshmëria e kodit të mos vuajë.

Prodhimi

Formati RGBA mbështet të gjithë shfletuesit modern përveç Internet Explorer. Është gjithashtu shumë e rëndësishme që RGBA fleksibël, ai vepron vetëm në një element të caktuar të caktuar, pa prekur fëmijët. Është e qartë se është më i përshtatshëm për koduesin. Zgjedhja ime është padyshim në favor të formatit RGBA për marrjen transparencë në css.

Për konsolidim më të mirë të materialit dhe qartësi më të madhe, ju sugjeroj të kaloni.

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

Ky artikull detajon 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 që duhet të bëhet 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 të 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, e cila funksionoi në versionet shumë të hershme të motorit Mozilla. Firefox e ndaloi mbështetjen në versionin 0.9.

Transparenca CSS në Firefox, Safari, Chrome dhe Opera

Për shumicën e shfletuesve modernë, mjafton të përdorni veçorinë e mëposhtme:

#Elementi im (opaciteti: .7; )

Në shembullin e mësipërm, elementi është vendosur në 70% opacity (30% transparencë). 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 kjo vështirë se është e dukshme.

Transparenca CSS për Internet Explorer

Si zakonisht, Internet Explorer nuk është miqësor me shfletuesit e tjerë. Përveç kësaj, ne tani kemi tre versione të këtij shfletuesi në përdorim mjaft të gjerë, cilësimi i transparencës në secilën prej të cilave është i ndryshëm 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: vetia hasLayout e elementit duhet të vendoset 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 e përdorura aktualisht, e dyta - vetëm në IE8. Vini re se rreshti i dytë përdor prefiksin -ms- dhe vlera është e mbyllur në thonjëza.

Vendosja dhe ndryshimi i transparencës CSS me 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, dhe gjithashtu 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, function() ( // Animacioni i përfunduar; ky kod funksionon në të gjithë shfletuesit. ));

Funksioni RGBA

CSS3 planifikon të mbështesë kanalin alfa me funksionin rgba. Ky funksion funksionon në Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+. Përdoret si kjo:

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

Në këtë rast, parametri i fundit tregon nivelin e errësirës.

Funksioni HSLA

Ashtu si funksioni i mëparshëm, CSS3 gjithashtu ju lejon të vendosni një ngjyrë të tejdukshme duke përdorur funksionin HSLA, parametrat e të cilit nënkuptojnë Hue (Hue), Saturation (Saturation), Brightness (Lightness) dhe Alfa Channel (Alpha).

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

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

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 duhet të ketë një model monokromatik, por një imazh, në këtë rast transparenca bëhet e dukshme. Ky efekt arrihet në shumë mënyra, dhe nëse mbani mend gjithçka, duke përfshirë metodat e modës së vjetër, atëherë kjo është përdorimi i një imazhi PNG si sfond, krijimi i një imazhi me kuadrate dhe vetia e opacitetit. Por sapo të bëhet e nevojshme të bëhet një sfond i tejdukshëm në bllok, këto metoda kanë një dobësi të pakëndshme. Unë do të bëj një përmbledhje 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 jo tradicionale për krijimin e një efekti tejdukshmërie.

PNG si sfond

Në redaktorin grafik përgatitet paraprakisht një vizatim i tejdukshëm me një ngjyrë, 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ë foto të tejdukshme.

Oriz. 1. Imazhi për të krijuar një sfond

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

Shembulli 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ër i Internet Explorer 6 nuk funksionon me tejdukshmëri në PNG-24, nëse për ndonjë arsye ju duhet të mbështesni këtë shfletues, do të duhet të përdorni skriptet për të.

Metoda e paraqitur ka një numër kufizimesh. Pra, kur fikni imazhet në shfletues, sfondi do të zhduket fare. Për më tepër, nuk është aq e lehtë të ndryshoni ngjyrën e sfondit dhe vlerën e transparencës, për këtë do t'ju duhet të modifikoni përsëri imazhin.

imazh me kuadrate

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

Oriz. 3. Model me kuadrate te zmadhuara

Ja si duket në fund (Fig. 4).

Oriz. 4. Imitim i tejdukshmërisë

Disavantazhet e kësaj metode janë të krahasueshme me atë të mëparshme, mund të ndodhin edhe modele moire dhe ndodh degradimi i tekstit.

vetia e tejdukshmërisë

Vetia e opacitetit CSS 3 vendos vlerën e transparencës dhe varion nga 0 në 1, ku zero është transparenca e plotë e elementit dhe një, përkundrazi, është opaciteti. Vetia e opacitetit ka një veçori - transparenca shpërndahet tek të gjithë elementët fëmijë dhe ato 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. pesë.

Oriz. 5. Transparenca e tekstit dhe sfondit

Në Internet Explorer deri dhe duke përfshirë versionin 8.0, opaciteti nuk funksionon, kështu që për të përdoret vetia e filtrit specifik të shfletuesit. Natyrisht, rezulton në kod të pavlefshëm CSS.

RGBA

Qasja moderne është shumë më e thjeshtë dhe vizuale 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), e fundit simbolizon kanalin alfa dhe përcakton transparencën e elementit. Formati i regjistrimit është ky.

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

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

Jo të gjithë shfletuesit e mbështesin këtë format: Internet Explorer që nga versioni 9, Opera që nga versioni 10, Firefox që nga 3, Safari që nga versioni 3.2. Por në përgjithësi, shfletuesit modernë shfaqin transparencën në mënyrë korrekte. Për versionet më të vjetra të IE, ju mund të specifikoni veçmas ngjyrën në formatin e saj të zakonshëm, ndërsa, natyrisht, nuk do të ketë transparencë. Ose përdorni përsëri veçorinë e filtrit, por më pas duhet të duroni faktin që transparenca do të ndikojë gjithashtu në tekst (shembulli 3). Për të zbatuar kodin e vlefshëm CSS, 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 figurën me atë të mëparshme, shkronjat janë bërë më të ndritshme dhe më të qarta.

Në Internet Explorer 7, u zbulua 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 ( sfond: e kuqe; /* Dhe kjo funksionon */ sfond: rgba(255, 0, 0, 0.5); ) Megjithatë, ka një paralajmërim. Vlerësuesi CSS "betohet" në sfond kur i jepet një vlerë RGBA. Por në të njëjtën kohë, ai zbatohet saktë për ngjyrën e sfondit. Në përgjithësi, si gjithmonë, ju duhet të zgjidhni midis shfletuesve dhe vlefshmërisë.