Läbipaistvus CSS-is on viimasel ajal üsna trendikas tehnika, mis tekitab raskusi brauseritevahelisel juurutamisel. Endiselt pole universaalset meetodit, mis võimaldaks läbipaistvust kõigi brauserite jaoks rakendada. Viimasel ajal on olukord aga märgatavalt paranenud.

See artikkel annab üksikasjaliku ülevaate olemasolevatest lähenemisviisidest, samuti koodinäiteid ja selgitusi, mis aitavad teil minimaalse pingutusega saavutada sama tulemuse kõigis brauserites.

Üks asi, mida tasub mainida, on see, et kuigi läbipaistvus on olnud juba mitu aastat, pole see kunagi CSS-i standardi osa olnud. See on mittestandardne atribuut, mis peaks olema osa CSS3 spetsifikatsioonist.

Vana lähenemine

Firefoxi ja Safari vanemates versioonides peate atribuuti rakendama järgmiselt.

#myElement ( -khtml-läbipaistmatus: .5; -moz-oacity: 0.5; )

Atribuuti -khtml-oacity kasutati veebikomplekti brauserite vanemates versioonides. See atribuut on aegunud ja seda pole enam vaja, välja arvatud juhul, kui olete kindel, et märkimisväärne osa teie saidi liiklusest pärineb Safari 1.x-i kasutavad külastajad, mis on muidugi ebatõenäoline.

Järgmine rida kasutab atribuuti -moz-opacity, mis töötas Mozilla mootori väga varastel versioonidel. Firefox lõpetas selle toetamise versioonis 0.9.

CSS-i läbipaistvus Firefoxis, Safaris, Chrome'is ja Operas

Enamiku kaasaegsete brauserite jaoks piisab järgmise atribuudi kasutamisest:

#myElement ( läbipaistmatus: .7; )

Ülaltoodud näites on elemendi läbipaistmatus 70% (läbipaistvus 30%). See tähendab, et kui seame väärtuseks ühe, on element läbipaistmatu ja vastavalt sellele muudab selle väärtuse nullimine selle nähtamatuks.

Läbipaistmatuse omadus töötleb 2 kümnendkoha numbrit. See tähendab, et väärtus ".01" erineb väärtusest ".02", kuigi see pole märgatav.

CSS-i läbipaistvus Internet Exploreri jaoks

Nagu tavaliselt, pole Internet Explorer teiste brauseritega sõbralik. Lisaks on meil nüüd üsna laialdaselt kasutusel kolm selle brauseri versiooni, mille läbipaistvuse seadistus on kõigil erinev ja nõuab positiivse tulemuse saavutamiseks mõnikord täiendavaid jõupingutusi.

#myElement ( filter: alfa(läbipaistmatus=40); )

See näide kasutab filtri atribuuti, mis töötab versioonides 6–8, kuid versioonidel 6 ja 7 on üks piirang: elemendi atribuudi hasLayout väärtuseks tuleb määrata true . See omadus on olemas ainult IE-s ja selle kohta saab täpsemalt lugeda näiteks Habrest.

Teine viis läbipaistvuse määramiseks IE8-s CSS-i abil on kasutada järgmist lähenemisviisi (märkida kommentaare):

#myElement ( filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* töötab IE6, IE7 ja IE8 puhul */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; / * ainult IE8 jaoks */ )

Esimene rida töötab kõigis praegu kasutatavates versioonides, teine ​​- ainult IE8-s. Pange tähele, et teisel real on eesliide -ms- ja väärtus on jutumärkides.

CSS-i läbipaistvuse seadistamine ja muutmine JavaScripti või jQuery abil

Läbipaistvuse määramiseks saate kasutada järgmist koodi.

Document.getElementById("myElement").style.opacity = ".4"; // enamiku brauserite jaoks document.getElementById("myElement").style.filter = "alpha(paistmatus=40)"; // IE jaoks

Muidugi on sel juhul jQuery kasutamine palju lihtsam, lisaks töötab see kõigis brauserites:

$("#myElement").css(( läbipaistmatus: .4 )); // töötab kõigis brauserites

Saate seda atribuuti animeerida:

$("#myElement").animate(( läbipaistmatus: .4 ), 1000, function() ( // Animatsioon on valmis; see kood töötab kõigis brauserites. ));

RGBA funktsioon

CSS3 kavatseb rgba funktsiooni abil alfa-kanaleid toetada. See funktsioon töötab versioonides Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+. Seda kasutatakse järgmiselt:

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

Sel juhul näitab viimane parameeter läbipaistmatuse taset.

HSLA funktsioon

Sarnaselt eelmisele funktsioonile võimaldab CSS3 ka HSLA funktsiooni abil määrata poolläbipaistvat värvi, mille parameetriteks on Hue, Saturation, Lightness ja Alpha channel.

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

Funktsioonide rgba ja hsla kasutamisel on oluline see, et läbipaistvuse sätet ei rakendata alamelementidele, samas kui läbipaistmatuse omaduse kasutamine on päritav.

CSS-i läbipaistmatuse omadus vastutab HTML-i elementide (pildid, tekst, plokid) läbipaistvuse eest.

CSS-i läbipaistmatuse süntaks

läbipaistmatus: väärtus;

Kui väärtus võib võtta tegelikke väärtusi vahemikus 0,0 kuni 1,0. Väärtus 1,0 tähendab läbipaistvuse puudumist (vaikimisi).

Näited: nagu läbipaistvus html-is

Näide nr 1. Läbipaistev pilt html-vormingus

Esimene pilt kuvatakse ilma läbipaistvuseta, teine ​​läbipaistvusega 0,5

Пример №2. Эффекты с прозрачностью в html

По умолчанию блок частично прозрачный. При наведении курсора мыши блок становится ярким. Такие эффекты зачастую используются в дизайне сайтов.

На странице преобразуется в следующее

Пример №3. Прозрачный блок на изображении в html

Ниже приведен пример полупрозрачного блока, который частично закрыл изображение. Блок специально накрывает изображение не полностью с целью показать, как он выглядит на пустом фоне.

На странице преобразуется в следующее

CSS прозрачность - кросс-браузерное решение - 3.8 out of 5 based on 6 votes

В данном уроке мы рассмотрим CSS прозрачность, узнаем как придать различным элементам страницы прозрачность и добиться полной кросс-браузерности, т. е. одинаковой работы этого эффекта в различных браузерах.

Как задать прозрачность любого элемента

В CSS3 за создание прозрачных элементов отвечает свойство opacity, которое можно применять к любым элементам. У данного свойства имеются значения от 0 до 1, которые и определяют степень прозрачности. Где 0 - это полная прозрачность, (значение по умолчанию для всех элементов), а 1 полная непрозрачность. Записываются значения дробями: 0.1, 0.2, 0.3 и т. д.

Пример использования:

Brauseriülene läbipaistvus

Kõik brauserid ei taju ega rakenda ülaltoodud läbipaistmatuse omadust ühtemoodi. Mõnel juhul on vaja kasutada teistsuguse omaduse nime või filtreid.

CSS3 läbipaistmatuse atribuuti toetavad järgmist tüüpi brauserid: Mozilla 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.

Nii hea :) brauser nagu Internet Explorer kuni versioonini 9.0 ei toeta läbipaistmatuse omadust ja selle brauseri läbipaistvuse loomiseks tuleb kasutada filtri atribuuti ja väärtust alfa(Opacity=X), milles X on täisarv vahemik 0 kuni 100, mis määrab läbipaistvuse taseme. 0 on täiesti läbipaistev ja 100 on täiesti läbipaistmatu.

Alates Firefoxi versioonist 3.5 toetab see opacity asemel atribuuti -moz-opacity.

KHTML-mootorile ehitatud brauserid nagu Safari 1.1 ja Konqueror 3.1 kasutavad läbipaistvuse kontrollimiseks atribuuti -khtml-paacity.

Kuidas saate CSS-is määrata läbipaistvuse, et see näeks kõigis brauserites ühesugune välja? Elementide läbipaistvuse jaoks brauseriülese lahenduse loomiseks peavad nad määrama mitte ainult ühe läbipaistmatuse atribuudi, vaid ka järgmise atribuutide komplekti:

filter: alfa(läbipaistmatus=50); /* IE läbipaistvus */ -moz-oacity: 0,5; /* Toetab Mozilla 3.5 ja vanemaid versioone */ -khtml-opacity: 0,5; /* Toetab versioone Konqueror 3.1 ja Safari 1.1 */ läbipaistmatus: 0,5; /* Toetab kõiki teisi brausereid */

Erinevate elementide läbipaistvus

Vaatame mõningaid näiteid läbipaistvuse määramisest teatud lehel kõige sagedamini kasutatavatele elementidele.

CSS-pildi läbipaistvus.

Vaatleme läbipaistva pildi loomiseks mitmeid võimalusi. Järgmises näites ei ole esimesel pildil läbipaistvus määratud, teisel on läbipaistvus 50% ja kolmandal on 30%.

Tulemus:

CSS-i läbipaistvus, kui hõljute kursorit pildi kohal.

Sageli on vaja pilt või mõni muu element läbipaistvaks teha hetkel, mil kursor selle kohal hõljub. Seda saate teha CSS-i pseudo-class:hover abil. Selleks tuleb meie pildile määrata kaks klassi, üks tavaline - see on pildi passiivne olek ja teine ​​klass pseudoklassiga: hõljutage, siin peate määrama pildi läbipaistvuse hetkel kursori hõljumisest.

Tulemust näete demos.

Tausta läbipaistvus CSS-i abil.

Siinkohal tuleb meeles pidada, et läbipaistvus kehtib kõigi pesastatud elementide puhul ja neil ei saa olla suurem läbipaistvus kui pesastatud elemendil.

Näitena toome pildi abil loodud lehe taustaga variandi ja värviga loodud taustaga ploki, mille läbipaistvus on 50%.

Näidiskood:

Siin on ülaltoodud koodi tulemus:

orem Ipsum on lihtsalt trüki- ja trükitööstuse näiv tekst. Lorem Ipsum on olnud tööstusharu standardne näidistekst alates 1500. aastatest, mil tundmatu printer võttis trükise kambüüsi ja valmistas selle tüübinäidise raamatuks. See on üle elanud mitte ainult viis sajandit, vaid ka hüppe elektroonilise ladumise suunas. , mis jäi sisuliselt muutumatuks. Seda populariseeriti 1960. aastatel koos Lorem Ipsumi lõigud sisaldavate Letraseti lehtede väljaandmisega ja hiljuti lauaarvutite kirjastamise tarkvaraga, nagu Aldus PageMaker, sealhulgas Lorem Ipsumi versioonidega.
On ammu tõestatud tõsiasi, et lehe kujundust vaadates häirib lugejat lehe loetav sisu. Lorem Ipsumi kasutamise mõte seisneb selles, et sellel on enam-vähem normaalne tähtede jaotus, erinevalt "Sisu siin, sisu siin" kasutamisest, mistõttu see näeb välja nagu loetav inglise keel. Paljud lauaarvuti avaldamise paketid ja veebilehtede toimetajad kasutavad nüüd vaikemudeltekstina Lorem Ipsumit ja otsing "lorem ipsum" avastab palju veebisaite, mis on alles lapsekingades. Aastate jooksul on välja kujunenud erinevaid versioone, vahel kogemata, vahel meelega (süstitud huumor jms).

Nii et täna räägime sellest läbipaistvus html-is lehekülgi. Tõenäoliselt olete kohanud läbipaistvaid hüpikaknaplokke, olgu selleks siis pildigalerii või sisselogimisvormid mõnel populaarsel veebisaidil. HTML-is on läbipaistvuse jaoks palju kasutusviise. Niisiis, kuidas seda tehakse ja kus seda kasutada saab?

Noh, kõigepealt mõistame, et meie dokumendil pole ainult ühte monitori tasand - see on üldiselt 3-mõõtmeline, mainisin seda artiklis "Z-indeks". Seega blokeeriks isegi täiesti läbipaistev kiht, kui see oleks kuvarivirna ülaosas, juurdepääsu teistele elementidele. See on läbipaistvate plokkide üks peamisi kasutusviise. Kuigi tavaliselt kasutatakse varjutusefekti, töötab täiesti läbipaistev kiht täpselt samamoodi. Näiteks töötavad paljud populaarsed fotogaleriid varjutatud kihina, kus kuvatakse fotod ja nende juhtelemendid. Ülejäänud leht on "kaetud" (pool) läbipaistva kihiga, mis blokeerib juurdepääsu kõigile teistele lehe elementidele. Need. Te ei saa lehelt lahkuda, klõpsates sellel ühelgi lingil – kogu tekst on kaetud taustaga. Saidi kehasse naasmiseks pakuvad need tavaliselt galerii sulgemise, sisselogimisvormi jms juhtelemente. Läbipaistvate plokkide kuvamise/peitmise juhtimine JavaScripti abil. Kahjuks pole sellele alternatiivi. Ilma seda kasutamata ei näe kasutaja läbipaistvat plokki üldse või ei saa seda sulgeda ilma praeguselt lehelt lahkumata. Märgin, et selleks kasutatakse nähtavust või kuvamise omadusi.

Niisiis, kuidas on läbipaistvus html-is tegelikult korraldatud? Elemendi läbipaistvuse seadistus CSS-i spetsifikatsioonis üldiselt ei sisaldu, seega peate selle loomiseks kasutama mitut juhist korraga. Mõned brauserid (st) töötavad ühe, teised teise valikuga. St kasutab sisseehitatud filtrifunktsiooni, teised brauserid kasutavad omadust "läbipaistmatus", mis on seatud vahemikus 0 (täiesti läbipaistev objekt) kuni 1 (täiesti läbipaistmatu). Näiteks 30% läbipaistvuse korral tuleks kirjutada " läbipaistmatus: 0,30; filter:alpha(läbipaistmatus=30);". Omadused, nagu näitest näha, on sarnased - ainult esimesel juhul kasutatakse arvu 0 kuni 1, teisel juhul protsendimärki. Sellise ploki näide:

<div stiil = "positsioon: absoluutne; ülemine: 0; vasakul: 0; taustavärv: rgb(18, 114, 214); laius: 100%; id = "VideoFrame" >

Näites kasutatakse video kuvamise plokki, mis aktiveeritakse, kui klõpsate video pisipildil. Ploki kõrgust pole määratud, kuna see võib olenevalt ekraani suurusest ja lehe sisust erineda. Seetõttu arvutatakse see video avamisel dünaamiliselt. Selle tehnika kasutamise näidet saab näha veebisaidi ruscircus.ru pealehel, millega ma omal ajal töötasin.

See on tegelikult kogu html-i läbipaistvuse saladus. Läbipaistva efekti saavutamiseks kasutame z-indeksit ja läbipaistmatust. Ja selle jaoks leiate palju rakendusi - siin piirab kõike ainult teie kujutlusvõime.

08.02.2013 Vastan kommentaarides esitatud küsimustele, nimelt selle kohta, kuidas läbipaistvale plokile läbipaistmatut teha. Siin on kõik lihtne, pole asjata, et ma märkisin materjalis lingi z-indeksit käsitlevale materjalile, peate looma teise ploki, mille z-indeks on läbipaistvast kõrgemal. Nüüd visandasin mõne minuti pärast näite. Plokid:

<div stiil = "positsioon: absoluutne; ülemine: 0; vasakul: 0; taustavärv: rgb(18, 114, 214); laius: 100%; kõrgus: 100%; läbipaistmatus: 0,30; filter:alpha(läbipaistmatus=30); nähtavus:peidetud; z-indeks:1;" id = "VideoFrame" > <div id = "VideoFrame2" stiil = "positsioon: absoluutne; ülemine: 25%; vasak: 25%; taustavärv: valge; laius: 50%; kõrgus: 50%; läbipaistmatus: 0,99; filter:alpha(läbipaistmatus=99); nähtavus:peidetud; z-indeks:2;" onclick = "javascript:HideForm();" > Siin kirjutame teksti</div>

Ja javascripti funktsioonid

< script type= "text/javascript" >function ShowForm() ( document.getElementById ("VideoFrame" ) .style .visibility = "nähtav" ; document.getElementById ("VideoFrame2" ) .style .visibility = "nähtav" ; ) funktsioon HideForm() ( document.getElement Id ("By" VideoFrame" ) .style .visibility = "peidetud" ; document.getElementById ("VideoFrame2") .style .visibility = "peidetud" ; )

Esimene funktsioon kuvab läbipaistva ploki (koos läbipaistmatu tekstiplokiga) – selle saab siduda nupuga. link jne. Teine funktsioon, mis mul on, on seotud tekstiga plokil hiireklõpsuga - see peidab läbipaistva ploki.

Loodan, et andsin selle toimimise osas selgust. Noh, kui ei, siis esitage küsimusi.