CSS skaidrumas pastaruoju metu yra gana madinga technika, dėl kurios kyla sunkumų diegiant įvairiose naršyklėse. Vis dar nėra universalaus metodo, kuris leistų įgyvendinti skaidrumą visose naršyklėse. Tačiau pastaruoju metu padėtis pastebimai pagerėjo.
Šiame straipsnyje išsamiai apžvelgiami esami metodai, taip pat pateikiami kodų pavyzdžiai ir paaiškinimai, kurie padės pasiekti tą patį rezultatą visose naršyklėse su minimaliomis pastangomis.
Verta paminėti vieną dalyką, kad nors skaidrumas egzistuoja jau keletą metų, jis niekada nebuvo CSS standarto dalis. Tai nestandartinė savybė, kuri turėtų būti CSS3 specifikacijos dalis.
Senas požiūris
Senovėje Firefox versijos ir „Safari“ turi pritaikyti ypatybę taip:
#myElement ( -khtml-nepermatomas: .5; -moz-opacity: 0.5; )
Ypatybė -khtml-opacity buvo naudojama senesnėse žiniatinklio rinkinių naršyklių versijose. Ši nuosavybė buvo pasenusi ir nebereikalinga, nebent esate įsitikinę, kad didelę jūsų svetainės srauto dalį sulaukia lankytojai, naudojantys „Safari 1.x“, o tai, žinoma, mažai tikėtina.
Kitoje eilutėje naudojama savybė -moz-opacity, kuri veikė labai gerai ankstesnes versijas Mozilla variklis. „Firefox“ nustojo jį palaikyti 0.9 versijoje.
CSS skaidrumas Firefox, Safari, Chrome ir Opera
Daugeliui šiuolaikinių naršyklių pakanka naudoti šią ypatybę:
#myElement (nepermatomumas: .7; )
Aukščiau pateiktame pavyzdyje elementas nustatytas į 70 % neskaidrumą (30 % skaidrumą). Tai yra, jei nustatysime reikšmę į vieną, elementas bus nepermatomas ir atitinkamai nustačius šią reikšmę į nulį, jis taps nematomas.
Nepermatomumo savybė apdoroja 2 dešimtainius skaitmenis. Tai reiškia, kad reikšmė „.01“ skirsis nuo reikšmės „.02“, nors tai ir nepastebima.
CSS skaidrumas, skirtas „Internet Explorer“.
Kaip visada, Internet Explorer nesuderinamas su kitomis naršyklėmis. Be to, dabar turime tris gana plačiai naudojamas šios naršyklės versijas, kurių skaidrumo nustatymas skiriasi ir kartais reikalauja papildomų pastangų norint gauti teigiamą rezultatą.
#myElement ( filtras: alfa(nepermatomumas=40); )
Šiame pavyzdyje naudojama filtro ypatybė, kuri veikia 6–8 versijose, tačiau 6 ir 7 versijose yra vienas apribojimas: elemento ypatybė hasLayout turi būti nustatyta į true . Ši savybė yra tik IE ir daugiau apie ją galite perskaityti, pavyzdžiui, Habré.
Kitas būdas nustatyti skaidrumą naudojant CSS IE8 yra naudoti šį metodą (atkreipkite dėmesį į komentarus):
#myElement ( filtras: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* veikia IE6, IE7 ir IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; / * tik IE8 */ )
Pirmoji eilutė veiks visose šiuo metu naudojamose versijose, antroji – tik IE8. Atminkite, kad antroje eilutėje naudojamas priešdėlis -ms-, o reikšmė yra kabutėse.
CSS skaidrumo nustatymas ir keitimas naudojant JavaScript arba jQuery
Norėdami nustatyti skaidrumą, galite naudoti šį kodą:
Document.getElementById("mano elementas").style.opacity = ".4"; // daugumai naršyklių document.getElementById("myElement").style.filter = "alpha(nepermatomumas=40)"; // skirta IE
Žinoma, šiuo atveju daug lengviau naudoti jQuery, be to, jis veiks visose naršyklėse:
$("#manoElementas").css(( neskaidrumas: .4 )); // veikia visose naršyklėse
Galite animuoti šią nuosavybę:
$("#myElement").animate(( neskaidrumas: .4 ), 1000, function() ( // Animacija baigta; šis kodas veikia visose naršyklėse. ));
RGBA funkcija
CSS3 planuoja palaikyti alfa kanalus naudodamas rgba funkciją. Ši funkcija veikia „Firefox 3+“, „Opera 10.1+“, „Chrome 2+“, „Safari 3.1+“. Jis naudojamas taip:
#rgba (fonas: rgba(98, 135, 167, .4); )
Šiuo atveju paskutinis parametras nurodo neskaidrumo lygį.
HSLA funkcija
Panašiai kaip ir ankstesnė funkcija, CSS3 taip pat leidžia nustatyti pusiau permatomą spalvą naudojant HSLA funkciją, kurios parametrai yra Hue, Saturation, Lightness ir Alpha.
#hsla (fonas: hsla(207, 38%, 47%, .4); )
Svarbus dalykas naudojant rgba ir hsla funkcijas yra tai, kad antriniams elementams netaikomas skaidrumo nustatymas, o neskaidrumo ypatybės naudojimas yra paveldimas.
Vladas Merževičius
Elemento permatomumo efektas aiškiai matomas fono paveikslėlyje ir plačiai paplitęs įvairiuose Operacinės sistemos nes atrodo stilingai ir gražiai. Kuriant žiniatinklio dizainą, skaidrumas taip pat naudojamas ir pasiekiamas per neskaidrumo ypatybę arba formatą RGBA spalvos, kuris nustatytas fonui.
Gradiento blokas
Padarykite bloką, parodytą pav. 1. Bloke yra permatomas gradiento rėmelis su gradiento fonu po pavadinimu ir maža rodyklė. Puslapio fonas pateikiamas tik dėl skaidrumo efekto aiškumo. Galite nurodyti bet kokį savo paveikslėlį. Mažiausias bloko aukštis yra 100 pikselių.
Kaip padaryti, kad sluoksnis būtų pusiau permatomas?
Norėdami pakeisti elemento skaidrumo laipsnį, naudokite nepermatomumo stiliaus savybę, kurios reikšmė yra nuo 0 iki 1, kur 0 atitinka visišką skaidrumą, o 1, priešingai, objekto neskaidrumą. Ši ypatybė neveikia „Internet Explorer“, 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.
Permatomas fonas
Vladas Merževičius
Dalinis skaidrumas, tinkamai naudojant, atrodo labai įspūdingai kuriant svetainės dizainą. Svarbiausia, kad po permatomais blokeliais būtų ne vienspalvis dizainas, o vaizdas, būtent šiuo atveju tampa pastebimas skaidrumas. Šis efektas pasiekiamas įvairiais būdais, o jei atsimenate visus, įskaitant senamadiškus metodus, tai naudojant PNG vaizdą kaip foną, sukuriant languotą vaizdą ir nepermatomumo savybę. Tačiau kai tik atsiranda poreikis bloke padaryti permatomą foną, šie metodai turi nemalonų minusą. Padarysiu trumpą apžvalgą, kad būtų aišku, apie ką kalbame, taip pat tiems skaitytojams, kurie nėra susipažinę su netradicinėmis permatomo efekto kūrimo galimybėmis.
Kaip nustatyti, kad lentelė būtų permatoma, bet kai kurios ląstelės ne?
Norėdami pakeisti elemento skaidrumą, CSS3 suteikia nepermatomumo savybę, jo reikšmė gali svyruoti nuo 0 iki 1. Nulis atitinka visą elemento skaidrumą, o vienas – neskaidrumą. Šiuolaikinės naršyklės gana teisingai veikia su šia savybe, išskyrus interneto naršyklė Explorer, todėl jai turite naudoti specialią filtro ypatybę su reikšme alfa(Opacity=X) , kur X gali skirtis nuo 0 iki 100.
Šioje pamokoje apžvelgsime tokius CSS savybės - neskaidrumas Ir RGBA. Nuosavybė Neskaidrumas atsako tik už elementų skaidrumą ir funkciją RGBA– spalvai ir skaidrumui, jei nurodote alfa kanalo skaidrumo reikšmę.
CSS skaidrumas Nepermatomumas
Skaitmeninė vertė neskaidrumas nustatytas intervale nuo 0,0 iki 1,0, kur nulis yra visiškas skaidrumas, o vienas, priešingai, yra absoliutus neskaidrumas. Pavyzdžiui, norėdami pamatyti 50% skaidrumą, turite nustatyti reikšmę į 0,5. Reikia turėti omenyje, kad neskaidrumas sklinda visiems antriniams tėvo elementams. Tai reiškia, kad tekstas ant permatomo fono taip pat bus permatomas. Ir tai yra labai reikšmingas trūkumas.
Skaidrumas naudojant CSS Opacity
Ekrano kopijoje aiškiai matyti, kad juodas tekstas tapo toks pat permatomas kaip mėlynas fonas.
Div(
fonas: url(images/yourimage.jpg); /* Fono vaizdas */
plotis: 750 pikselių;
aukštis: 100 pikselių;
paraštė: auto;
}
.mėlyna (
fonas: #027av4; /* Grindų spalva skaidrus fonas */
neskaidrumas: 0,3; /* Fono skaidrumo reikšmė */
aukštis: 70 pikselių;
}
h1 (
paminkštinimas: 6px;
šriftų šeima: Arial Black;
šrifto svoris: ryškesnis;
šrifto dydis: 50 pikselių;
}
CSS skaidrumas RGBA formatu
Spalvų įrašymo formatas RGBA, yra modernesnė turto alternatyva neskaidrumas. R (raudona), G (žalia), B (mėlyna)- reiškia: raudona, žalia, mėlyna. Paskutinis laiškas A– reiškia alfa kanalą, kuris nustato skaidrumą. RGBA Skirtingai nei Neskaidrumas neturi įtakos vaikų elementams.
Dabar pažvelkime į mūsų naudojimo pavyzdį RGBA. Pakeiskime šias eilutes stiliuose.
Fonas: ##027av4; /* Fono spalva */
neskaidrumas: 0,3; /* fono skaidrumo reikšmė */
į kitą eilutę
Fonas: rgba(2, 127, 212, 0,3);
Kaip matote, abiejų metodų skaidrumo vertė 0,3 yra vienoda.
RGBA pavyzdžio rezultatas:
Antroji ekrano kopija atrodo daug geriau nei pirmoji.
Žaisdami su blokų fono permatomumu galite pasiekti įdomių efektų savo svetainėje. Svarbu, kad šie permatomi blokai būtų ant spalvingo dizaino, pavyzdžiui, nuotraukos. Tik šiuo atveju poveikis bus pastebimas. Ši technika jau seniai buvo naudojama projektuojant, net prieš atsirandant bet kokiai CSS3, jis buvo įgyvendintas tik grafinėse programose.
Jei klientas reikalauja, kad išdėstymas gerai atrodytų senesnėse naršyklės versijose Internet Explorer, tada pridėkite nuosavybę filtras ir nepamirškite pakomentuoti, kad nenukentėtų kodo galiojimas.
Išvada
Formatas RGBA palaiko visas šiuolaikines naršykles, išskyrus Internet Explorer. Taip pat labai svarbu, kad RGBA lankstus, jis veikia tik konkretų nurodytą elementą, nepaveikdamas jo vaikų. Aišku, kad maketuotojui taip patogiau. Mano pasirinkimas tikrai palankus formatui RGBA už gavimą skaidrumas CSS.
Norėdami geriau konsoliduoti medžiagą ir daugiau aiškumo, siūlau jums pereiti.
Skaidraus fono kūrimas HTML ir CSS (nepermatomumo ir RGBA efektai)
Permatomas efektas elementas yra aiškiai matomas fono paveikslėlyje ir tapo plačiai paplitęs įvairiose operacinėse sistemose, nes atrodo stilingai ir gražiai. Svarbiausia, kad po permatomais blokais būtų ne vienspalvis raštas, o vaizdas, būtent šiuo atveju tampa pastebimas skaidrumas.
Šis efektas pasiekiamas įvairiais būdais, įskaitant senamadiškus metodus, pvz., PNG vaizdo naudojimą kaip foną, languoto vaizdo kūrimą ir neskaidrumo savybę. Tačiau kai tik atsiranda poreikis bloke padaryti permatomą foną, šie metodai turi nemalonių minusų.
Pažvelkime į teksto ir fono permatomumą – kaip teisingai jį panaudoti kuriant svetainę:
Pagrindinis šios savybės bruožas yra tas, kad skaidrumo reikšmė veikia visus antrinius joje esančius elementus, o ne tik foną. Tai reiškia, kad ir fonas, ir tekstas taps permatomi. Galite padidinti skaidrumo lygį pakeisdami neskaidrumo komandą nuo 0,1 iki 1.
HTML 5 CSS 3 IE 9
Interneto dizaine taip pat naudojamas dalinis skaidrumas ir pasiekiamas naudojant RGBA spalvų formatą, kuris nustatomas tik elemento fonui.
Paprastai projekte tik elemento fonas turi būti permatomas, o tekstas turi būti nepermatomas, kad būtų išlaikytas skaitomumas. Nepermatomumo savybė čia netinka, nes elemento viduje esantis tekstas taip pat bus iš dalies skaidrus. Geriausia naudoti RGBA formatą, kuris turi alfa kanalą arba, kitaip tariant, skaidrumo reikšmę. Reikšmė rašoma rgba, tada skliausteliuose pateikiamos raudonos, mėlynos ir žalios spalvos komponentų reikšmės, atskirtos kableliais. Paskutinis yra skaidrumas, kuris nustatomas nuo 0 iki 1, o 0 reiškia visišką skaidrumą, o 1 spalvos neskaidrumas - rgba naudojimo sintaksė.
Permatomas fonas HTML 5 CSS 3 IE 9
CSS neskaidrumo ypatybė yra atsakinga už html elementų (paveikslėlių, teksto, blokų) skaidrumą.
CSS neskaidrumo 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 rodomas be skaidrumo, antrasis su skaidrumu 0,5
Elemento skaidrumas
Padarykite vaizdą permatomą užvedę pelės žymeklį!
DemoParsisiųsti šaltiniusAčiū už dėmesį!
Kitas straipsnis
Apžvalga
Kaip sukurti div bloką su slinkimu?
