CSS nuosavybė 3 neskaidrumas leidžia padaryti tą ar kitą svetainės elementą skaidrų.

Elemento skaidrumo laipsnis nustatomas pagal vertę nuo 0 prieš 1 kur 0 - visiškai skaidrus 1 - visai nepermatomas .. Pavyzdžiui, vertė 0.5 savybių neskaidrumas pritaikytas paveikslėliui reikš, kad šis vaizdas turi būti permatomas.

Skaidrumas IE

Naršyklė Internet Explorer nepalaiko savybių neskaidrumas iki devintos versijos, tačiau ji turi savo filtrą, su kuriuo galite nustatyti skaidrumo laipsnį:

filtras: alfa(nepermatomumas=50)

Reikšmė neskaidrumas filtrui interneto naršyklė Explorer gali skirtis nuo 0 - visiškai skaidrus 100 - nepermatomas

Šio meniu blokai bus permatomi ir užvedus pelės žymeklį IE!!

namai
svetainės žemėlapį
Pirkite dramblį
parduodu dramblį
Išsinuomoti dramblį

Priešdėliai.

Tuo iš principo būtų galima baigti skyrių apie skaidrumą, bet norėčiau plačiau papasakoti apie vadinamąjį. pardavėjo priešdėliai.. šie bendražygiai neturi daug bendro su šiuo skyriumi, tačiau toliau besimokydami CSS3 jie susitiks vis dažniau ir kai kur man reikia apie juos pakalbėti - tai aš jums pasakysiu čia.

Taigi, tiekėjo prefiksai yra specialūs CSS ypatybių priešdėliai, kuriuos naršyklės naudoja eksperimentinėms ypatybėms, kurios oficialiai nėra CSS specifikacijos dalis.

Prisimename, kad CSS 3 specifikacija vis dar kuriama ir formaliai šioje pamokoje aprašytų savybių gamtoje nėra, tačiau naršyklės jau aktyviai jas naudoja rizikuodami ir rizikuodami.

Kodėl savo rizika? Taip, nes gali būti, kad oficialiai patvirtinus CSS 3 specifikaciją, joje aprašytos savybės savo veikimu skirsis nuo ypatybių tokiu pačiu pavadinimu, kurias jau naudoja naršyklės. Na, pažvelkime į CSS 3 specifikacijų kūrėjus, kad priskirtumėte nuosavybę neskaidrumas ne kaip bloko skaidrumo laipsnį, o, pavyzdžiui, kaip jo šešėliavimą ar mirgėjimą (žinoma, rašau nesąmones), kuriuos tada jau parodys milijonai įdiegtos naršyklės kuriam neskaidrumas ar tai skaidrumas?

Arba, tarkime, naršyklės kūrėjai sugalvojo savo nuosavybę – naujovę, kurios niekas išvis niekur neturi, bet dokumentas su tokia savybe nepraeina galiojimo patikrinimo, nes specifikacijoje tokios savybės nėra.

Dėl šių ir kitų priežasčių naršyklės naudoja priešdėlius ypatybių, kurios nėra oficialios specifikacijos dalis, pradžioje. Kiekviena naršyklė turi savo priešdėlį, prasidedantį „-“ ženklu, šis ženklas nuosavybės pradžioje, taip pat šis „_“ ženklas pagal CSS 2.1 specifikaciją rodo, kad nuosavybė rezervuota tam tikrų CSS plėtiniams. naršyklės.

Štai populiariausios naršyklės ir jų priešdėliai:

Naršyklė	Priešdėlis
Opera	-o-
Firefox, SeaMonkey, Camino	-moz-
Internet Explorer 8 ir naujesnė versija	-ms-
Safari iki 3 versijos, Konqueror	-khtml-
„Safari 3“ ir naujesnės versijos, „Google Chrome“.	-Webkit-

Naudoti prefiksus labai paprasta, tiesiog paimkite tam tikrą CSS ypatybę ir pakeiskite ją norimu priešdėliu, pavyzdžiui, ypatybe neskaidrumas pakaitalas -moz- paaiškėja: -moz-nepermatomumas

Nors iš tikrųjų mano išraiška " naudoti priešdėlius» negerai! Tiesą sakant, niekas niekur nepakeičiamas, yra tik nuosavybė neskaidrumas, yra ten -moz-nepermatomumas ir tai yra dvi skirtingos savybės, kurios neturi atlikti tos pačios funkcijos!! – reikia suprasti.

Ir taip pat reikia suprasti, kad tam tikros konkrečios naršyklės, iki tam tikrų versijų, gali palaikyti CSS ypatybes tik su savo priešdėliais (vėlgi aš neteisingai išsireiškiu, teisinga sakyti, kad mano nuosavybės yra naršyklės CSS plėtiniai), arba jie iš pradžių gali pasikliauti net parengtomis specifikacijomis. – Kiekvieną konkretų atvejį šiame vadovėlyje nagrinėsime atskirai.

Kalbant apie šį skyrių apie skaidrumą, reikia pažymėti, kad Firefox naršyklė 3.5 ir anksčiau naudojasi savo turtu -moz-nepermatomumas, o „Safari“ naršyklė iki 1.1 versijos naudoja savo nuosavybę -khtml-nepermatomumas .

Taigi, norėdami, kad mūsų pavyzdys būtų visiškai kryžminis, prie kodo turime pridėti dar keletą eilučių:

Kaip matote, priešdėliai žymiai išplečia kodą ir jų naudojimas ne visada pateisinamas, jei naršyklių versijos, kurios nori dirbti su tam tikromis ypatybėmis tik naudodamos savo priešdėlius, yra gana senos, kaip ir ypatybės atveju. neskaidrumas, tada jūs negalite jų nurodyti .. - nors tai, žinoma, yra blogas patarimas.

Dabar keletas naudingų patarimų..

Visada naudokite priešdėlius (na, nebent be jų neapsieina viena ar kita naršyklė) tais atvejais, kai naudojama ypatybė gali labai paveikti svetainės veikimą, skaitomumą ir patogumą. Vienas dalykas, kai neveikia kai kurios svetainės dizaino smulkmenos, ir visai kas kita, kai, pavyzdžiui, neveikia svetainės meniu arba neįmanoma perskaityti teksto svetainėje dėl to, kad naršyklė tai daro. nepalaiko kažkokio turto, o naudoja panašų savo.

CSS yra trys būdai, kaip pakeisti elemento skaidrumą:
naudojant neskaidrumo savybę,
naudojant rgba() funkciją,
naudojant funkciją hsla().

1. Nepermatomumo savybė

Nepermatomumo ypatybė leidžia padaryti bet kurį tinklalapio elementą iš dalies arba visiškai skaidrų. Ši savybė pakeičia nustatytų elementų skaidrumą fono paveikslėlis(paveikslėlis) arba nustatykite foną naudodami spalvą arba gradientą. Jei elemente, kuriam taikoma neskaidrumo ypatybė, yra kitų elementų, jie taip pat pakeis savo neskaidrumą.
Nepermatomumo savybės reikšmės yra nuo 0 (visiškai skaidrus) iki 1 (nepermatomas), pavyzdžiui:

H1 (spalva: #CD6829;) div (fonas: #CDD6DB; neskaidrumas: .3; )
Ryžiai. 1. Elementų skaidrumas naudojant neskaidrumą

2. RGB() funkcija

RGBA spalvų modelis sukuria spalvos atspalvį maišant reikiamomis proporcijomis. raudona, žalias ir mėlyna gėlės ir alfa kanalas (alfa) yra atsakingas už spalvos skaidrumo laipsnį. Skirtingai nuo nepermatomumo savybės, langelyje, kuriame yra kitų elementų, funkcija rgba() pakeis tik langelio neskaidrumą.

Ryžiai. 2. RGB spalvų modelis h1 (spalva: #CD6829;) div (fonas: rgba(205, 214, 219, 0.3);)
Ryžiai. 3. Elementų skaidrumas naudojant rgba() funkciją

3. hsl() funkcija

Funkcija hsla(), kurios parametrai reiškia tonas (atspalvis), Sodrumas, ryškumą ir alfa kanalas (alfa), taip pat leidžia nustatyti permatomą spalvą.

Spalvų atspalviai nurodomi procentais, naudojant atitinkamą reikšmę iš spalvų rato. Pats apskritimas yra padalintas į sektorius, kurių kraštuose yra pagrindinės spalvos:

0/360° - raudona
60° - geltona
120° - žalia
180° - mėlyna
240° - mėlyna
270° - violetinė
300° rausvai raudona.

Norėdami gauti juodą spalvą, atspalvio, sodrumo ir ryškumo reikšmes turite nustatyti į nulį - hsla(0, 0%, 0%, 1) . Balta spalva gaunama esant 100 % ryškumui hsla(0, 0%, 100%, 1) , o pilka nulinė vertė sodrumas hsla(0, 0%, 50%, 1) .

CSS3 apibrėžia neskaidrumo ypatybę, kad puslapio elementams būtų pritaikytas skaidrus efektas. Šios savybės vertė yra skaičius nuo 0,0 iki 1,0. Nulis padaro elementą visiškai skaidrus, o vieneto vertė – visiškai nepermatomą. Savybę galima pritaikyti bet kuriam puslapio elementui.

Img1 ( neskaidrumas: 0,2; ) .img2 ( neskaidrumas: 0,5; ) .img3 ( neskaidrumas: 1,0; )

Norėdami nustatyti skaidrumą naudodami scenarijų, naudokite: object.style.opacity

Senosios „Mozilla“ ir „Firefox 0.8“ versijos šiai ypatybei naudoja savo pavadinimą: -moz-opacity Norėdami nustatyti skaidrumą naudodami scenarijų, naudokite: object.style.MozOpacity

„Safari 1.1“, „Konqueror 3.1“ – sukurta remiantis KHTML varikliu, skaidrumui valdyti naudokite ypatybę: -khtml-opacity Norėdami nustatyti skaidrumą naudodami scenarijų, naudokite: object.style.KhtmlOpacity

„Safari“ naudoja CSS3 neskaidrumą nuo 1.2 versijos, tačiau senesnė nei 3.1 versija Konqueror, nustojusi palaikyti -khtml-nepermatomumą, neįvedė CSS3 neskaidrumo palaikymo.

Internet Explorer nuo 5.5 ir naujesnės versijos šiandien Interneto versija„Explorer 7“ įgyvendina skaidrumą per „Alpha DirectX“ filtrą. Verta paminėti, kad šis filtras naudoja skaidrumo reikšmę nuo 0 iki 100 (o ne nuo 0,0 iki 1,0). Taip pat atkreipiu dėmesį, kad filtrą galima pritaikyti tik elementui, kurio ypatybė aukštis, plotis arba padėtis nustatytas į absoliutų, o writeMode nustatytas į tb-rl arba contentEditable nustatytas į true.

Pavyzdys (nustatykite neskaidrumą iki pusės):

Img1 ( filtras:progid:DXImageTransform.Microsoft.Alpha(nepermatomumas=50); )/* IE5.5+ sintaksė (pageidautina) */ .img2 ( filtras: alfa(nepermatomumas=50); ) /* IE4 sintaksė */ Kam nustatykite skaidrumą naudodami scenarijų, naudokite: object.style.filter = "progid:DXImageTransform.Microsoft.Alpha(parametrų eilutė)"

Norėdami gauti skaidrumą, panašų į W3C skaidrumą, kaip parametrų eilutę naudokite „nepermatomumas=skaičius nuo 0 iki 100“.

Kaip priversti jį veikti visose naršyklėse:

filtras:progid:DXImageTransform.Microsoft.Alpha(nepermatomumas=50); /* IE 5.5+*/ -moz-nepermatomumas: 0,5; /* „Mozilla 1.6“ ir senesnės versijos */ -khtml-nepermatomumas: 0,5; /* Konqueror 3.1, Safari 1.1 */ neskaidrumas: 0,5; /* CSS3 – „Mozilla 1.7b“ ir naujesnė versija, „Firefox 0.9“ ir naujesnė versija, „Safari 1.2“ ir naujesnė versija, „Opera 9“ */

javascript

funkcija setElementOpacity(sElemId, nOpacity) ( var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId); if (!elem || !opacityProp) grįžti; // Jei nėra elemento su nurodytu ID arba naršyklė nepalaiko nė vieno iš skaidrumo valdymo funkcijai žinomų metodų if (opacityProp=="filter") // Internet Exploder 5.5+ ( nOpacity *= 100; // Jei skaidrumas jau nustatytas, pakeiskite jį naudodami filtrus kolekciją, kitu atveju pridėkite skaidrumo naudodami style.filter var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity ="+nOpacity+")"; // Kad neperrašytumėte kitų filtrų, naudokite "+=" ) else // Kitos naršyklės elem.style = nOpacity; ) funkcija getOpacityProperty() ( if (typeof document.body.style.opacity == "string") // Suderinamas su CSS3 (Moz 1.7+, Safari 1.2+, Opera 9) grąžina "nepermatomumą"; else if (typeof document.body.style.MozOpacity == "string") // Mozilla 1.6 ir senesnės versijos, Firefox 0.8 grąžina "MozOpacity"; else if (typeof document.body.style.KhtmlOpacity == "string") // Konqueror 3.1, Safari 1.1 grąžina "KhtmlOpacity"; else if (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)>=5.5) // Internet Exploder 5.5+ grąžina "filtrą"; return false; // nėra skaidrumo)

Užduotis

Padarykite bloko elementą su visu turiniu permatomu.

Sprendimas

Norėdami pakeisti elemento skaidrumo laipsnį, stiliaus savybės neskaidrumas naudojamas su reikšme nuo 0 iki 1, kur 0 atitinka visišką skaidrumą, o 1, priešingai, objekto neskaidrumą. „Internet Explorer“ ši ypatybė neveikia, todėl turite naudoti specialiai jai skirtą filtrą – ypatybę, kuri nėra CSS specifikacijos dalis. 1 pavyzdyje parodyta, kaip nustatyti sluoksnio skaidrumą visoms naršyklėms.

1 pavyzdys. Pusiau skaidrus sluoksnis

HTML5 CSS 2.1 IE Cr Op Sa Fx

Rezultatas šis pavyzdys parodyta pav. vienas.

Ryžiai. 1. Pusiau skaidrus sluoksnis Safari naršyklėje

Filtro savybė suteikia skaidrumo tik tiems elementams, kuriuose nustatytas bent vienas iš dydžių (plotis arba aukštis ) arba elementas nustatytas į absoliutus pozicionavimas(pozicija: absoliuti).

Taip pat atminkite, kad skaidrumas turi įtakos visam sluoksnio turiniui, įskaitant antrinius elementus, ir jūs negalėsite padidinti jų neskaidrumo lygio keisdami neskaidrumą. 1 pavyzdyje, kai sluoksnio skaidrumas nustatytas į 0,7 , sluoksnio viduje esantis tekstas gauna tą pačią reikšmę. Leidžiama nustatyti mažiau, tačiau tekstas negali viršyti skaidrumo vertės 0,7.

CSS neskaidrumo ypatybė yra atsakinga už elementų (vaizdų, teksto, blokų) skaidrumą html.

CSS sintaksė

Kur vertė gali būti tikroji vertė nuo 0,0 iki 1,0. 1,0 reikšmė reiškia, kad nėra skaidrumo (numatytasis).

1 pavyzdys. skaidrus vaizdas html

Pirmasis vaizdas atvaizduojamas be skaidrumo, antrasis – su 0,5 skaidrumo.

Elemento skaidrumas

Padarykite vaizdą permatomą užvedus pelės žymeklį!

DemoParsisiųsti šaltinius

Ačiū už dėmesį!

Kitas straipsnis
Kaip sukurti slenkamą div?