Si të vendosni transparencën në css - bllok transparent. Vetia e tejdukshmërisë së CSS: kontrolli i transparencës
Në këtë mësim, ne do t'i hedhim një sy këtyre css Vetitë - errësirë Dhe RGBA. Prona 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ë intervalin 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ë.
Transparenca përmes Opacity CSS
Pamja e ekranit tregon qartë se teksti i zi është bërë po aq i tejdukshëm sa sfondi blu.
Div (
sfond: url (imazhe/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ë.
konkluzioni
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.
Përcakton nivelin e transparencës së një elementi të faqes së internetit. Me transparencë të pjesshme ose të plotë, imazhi i sfondit ose elementë të tjerë poshtë objektit të tejdukshëm shfaqen përmes elementit.
informacion të shkurtër
Shënimi
| Përshkrim | Shembull | |
|---|---|---|
| <тип> | Përcakton llojin e vlerës. | <размер> |
| A&&B | Vlerat duhet të dalin në rendin e specifikuar. | <размер> && <цвет> |
| A | B | Tregon që vetëm një nga vlerat e sugjeruara (A ose B) duhet të zgjidhet. | normale | kapele të vogla |
| A || B | Çdo vlerë mund të përdoret më vete ose në kombinim me të tjerat në çdo mënyrë. | gjerësia || numëroj |
| Vlerat e grupeve. | [ kulture || kryq] | |
| * | Përsëriteni zero ose më shumë herë. | [,<время>]* |
| + | Përsëriteni një ose më shumë herë. | <число>+ |
| ? | Lloji, fjala ose grupi i specifikuar është opsional. | futur? |
| (A, B) | Përsëriteni të paktën A, por jo më shumë se B herë. | <радиус>{1,4} |
| # | Përsëriteni një ose më shumë herë të ndara me presje. | <время># |
vlerat
Vlera është një numër nga diapazoni . Vlera 0 korrespondon me transparencën e plotë të elementit, 1, përkundrazi, me errësirën e tij. Numrat thyesorë si 0.6 vendosin tejdukshmërinë. Lejohet të shkruhen numra pa zero kryesore, si opaciteti: .6 .
Sandbox
Winnie the Pooh nuk ishte gjithmonë kundër një pije freskuese, veçanërisht në orën njëmbëdhjetë të mëngjesit, sepse në atë kohë mëngjesi kishte mbaruar prej kohësh dhe darka as që kishte menduar të fillonte. Dhe, natyrisht, ai u gëzua jashtëzakonisht shumë kur pa që Lepuri nxori gota dhe pjata.
div (opaciteti: 1 ;)
Shembull
Rezultati i këtij shembulli është paraqitur në Fig. 1.
Oriz. 1. Rezultati i përdorimit të opacitetit
Modeli i objektit
Nje objekt.stil.opacitet
shënim
Firefox deri në versionin 3.5 mbështet veçorinë -moz-opacity.
Internet Explorer para versionit 9.0 përdor filtra për të ndryshuar transparencën, për këtë shfletues duhet të shkruani filtër : alfa(opacity=50) , ku parametri i opacitetit mund të marrë një vlerë nga 0 në 100.
Specifikim
Çdo specifikim kalon nëpër disa faza të miratimit.
- Rekomandim (Rekomandim) - specifikimi është miratuar nga W3C dhe rekomandohet si standard.
- Rekomandimi i Kandidatit ( Rekomandim i mundshëm) - grupi përgjegjës për standardin është i kënaqur që ai përmbush qëllimet e tij, por kërkohet mbështetja e komunitetit të zhvillimit për zbatimin e standardit.
- Rekomandimi i propozuar ( Rekomandim i sugjeruar) - në këtë fazë, dokumenti i dorëzohet Bordit Këshillimor të W3C për miratim përfundimtar.
- Drafti Punues - Një draft më i pjekur pas diskutimit dhe amendamenteve për shqyrtim nga komuniteti.
- Drafti i redaktorit ( Drafti editorial) është një draft version i standardit pasi janë bërë ndryshime nga redaktorët e projektit.
- draft ( Drafti i specifikimeve) është versioni i parë draft i standardit.
Ditë të mirë, të rinjtë e zhvillimit të uebit, si dhe të rinjtë e saj. Për ata që nuk ndjekin trendet në fushën e IT-së, ose më mirë të modës në internet, dua të njoftoj solemnisht se ky publikim me temën: "Si të bëjmë një bllok transparent css me mjete" është pikërisht rruga 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 mënyrat ekzistuese për të krijuar transparencë, duke filluar nga zgjidhjet paradiluvian, fokusimi në pajtueshmërinë e zgjidhjeve me shfletuesit dhe gjithashtu do të jap shembuj specifikë të kodit të programit. Dhe tani për të punuar!
Metoda 1. Paradiluvian
Kur kishte ende kompjuterë 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ë shah 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 ngatërrohet
Në raste të rralla, zhvilluesit zgjidhin problemin me prezantimin e një imazhi të tejdukshëm duke futur ... një imazh të tejdukshëm tashmë të përfunduar! Për këtë, përdoren imazhet e 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:
- Internet Explorer 6 nuk funksionon me këtë teknologji, ju duhet të shkruani kodin e skriptit për të;
- Ju nuk mund të ndryshoni ngjyrat e sfondit në css;
- Nëse funksioni i shfaqjes së imazhit të shfletuesit është i çaktivizuar, ai do të zhduket.
Metoda 3. Promovuar
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 shfaqet plotësisht. Megjithatë, këtu ka disa momente të pakëndshme.
Së pari, të gjithë elementët fëmijë trashëgojnë transparencën. Dhe kjo do të thotë se teksti i mbishkruar do të "shkëlqejë" së bashku me sfondin.
Së dyti, Internet Explorer e hap përsëri 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).
Konsideroni 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, 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 - nuancat e jeshiles dhe B - 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 prek objektet brenda kutisë së stiluar.
rgba (r, g, b, a) mbështetet pasi:
- 10 versione të Opera;
- Internet Explorer 9;
- Safari 3.2;
- 3 versione të Firefox-it.
Dua të vërej një fakt interesant! Internet Explorer 7 i dashur hedh një gabim kur kombinon një pronë 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.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
Në dyqanin tonë do të gjeni të gjitha llojet e luleve.
|
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%.
Ky postim ka marrë fund. Abonohuni në blogun tim dhe mos harroni të ftoni miqtë tuaj. Fat i mirë me mësimin e gjuhëve të internetit! Mirupafshim!
Sinqerisht, Roman Chueshov
Lexoni: 326 herë
Transparenca CSS - zgjidhje ndër-shfletuesi - 3.6 nga 5 bazuar në 5 vota
Në këtë tutorial, ne do të shikojmë transparencën e CSS, do të mësojmë se si t'i bëjmë elementë të ndryshëm të faqes transparente dhe të arrijmë një ndër-shfletues të plotë, d.m.th., të njëjtin efekt të këtij efekti 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ë plotësisht transparente (vlera e paracaktuar për të gjithë elementët) dhe 1 është plotësisht e errët. Vlerat shkruhen si thyesa: 0.1, 0.2, 0.3, etj.
Shembull përdorimi:
Transparenca e kryqëzuar e shfletuesit
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 shfletuesit e mëposhtëm Mozilla 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.
Shumë mirë :) Shfletuesi si Internet Explorer deri në versionin 9.0 nuk mbështet pronësinë 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) ku X është një numër i plotë midis 0 dhe 100 që përcakton nivelin e transparencës. 0 është transparencë e plotë dhe 100 është errësirë e plotë.
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 të 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 elementeve, ata duhet të regjistrojnë 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ështetje për Mozilla 3.5 dhe më poshtë */ -khtml-opacity: 0.5; /* Mbështetje për Konqueror 3.1 dhe Safari 1.1 */ opacity: 0.5; /* Mbështetje për 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.
Konsideroni disa opsione për krijimin e një imazhi të tejdukshëm. Në shembullin e mëposhtëm, fotografia e parë nuk ka transparencë, e dyta ka 50% transparencë dhe e treta 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ë. Kjo mund të bëhet duke përdorur pseudo-klasën :hover CSS. Për ta bërë këtë, fotografia jonë duhet të regjistrojë dy klasa, një e zakonshme - 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 në kohën e duke qëndruar pezull kursorin.
Ju mund ta shihni rezultatin në demo.
Transparenca e sfondit CSS
Këtu duhet të mbani mend se transparenca vlen për të gjithë elementët e mbivendosur dhe ata nuk mund të kenë më shumë transparencë se elementi i mbivendosur.
Si shembull, le të japim një variant me një sfond faqeje të krijuar duke përdorur një imazh dhe një bllok me një sfond të krijuar duke përdorur ngjyra dhe me një transparencë prej 50%.
Shembull kodi:
Këtu është rezultati i kodit të mësipërm:
Transparenca në CSS është një teknikë mjaft e modës kohët e fundit, e cila shkakton vështirësi në zbatimin e ndër-shfletuesve. 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", edhe pse 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ë të përdorni qasjen e 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 të 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. Kjo veçori 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 kanal Alfa (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.
