Ustvarite prosojno ozadje v HTML in CSS (prosojnost in učinki RGBA)

Učinek prosojnosti element je jasno viden na sliki ozadja in je postal razširjen v različnih operacijskih sistemih, ker izgleda elegantno in lepo. Glavna stvar je, da pod prosojnimi bloki ni monokromatski vzorec, ampak slika, v tem primeru postane preglednost opazna.

Ta učinek je dosežen na različne načine, vključno s staromodnimi tehnikami, kot je uporaba slike PNG kot ozadja, ustvarjanje kariraste slike in lastnost motnosti. Toda takoj, ko je treba v bloku narediti prosojno ozadje, imajo te metode neprijetne slabosti.

Razmislite o prosojnosti besedila in ozadja - kako ga pravilno uporabiti pri oblikovanju spletnega mesta:

Glavna značilnost te lastnosti je, da vrednost preglednosti vpliva na vse otroke v notranjosti, ne samo na ozadje. To pomeni, da bosta tako ozadje kot besedilo postala prosojna. Raven preglednosti lahko povečate tako, da spremenite ukaz za motnost iz 0,1 na 1.

HTML 5 CSS 3 IE 9

Pri spletnem oblikovanju se uporablja tudi delna preglednost, ki jo dosežemo z barvnim formatom RGBA, ki je nastavljen samo za ozadje elementa.

Običajno mora biti v dizajnih samo ozadje elementa prosojno, besedilo pa mora biti neprozorno, da se ohrani berljivost. Lastnost motnosti tukaj ni primerna, ker bo tudi besedilo znotraj elementa delno pregledno. Najbolje je uporabiti format RGBA, katerega del je alfa kanal, ali z drugimi besedami vrednost prosojnosti. Vrednost je zapisana rgba, nato pa so vrednosti rdeče, modre in zelene barvne komponente navedene v oklepajih, ločenih z vejicami. Zadnja je prosojnost, ki je nastavljena od 0 do 1, pri čemer je 0 popolna preglednost in 1 neprozorna barva za sintakso rgba.

Prosojno ozadje HTML 5 CSS 3 IE 9

Neprosojnost ozadja je nastavljena na 90 % - Polprozorno ozadje in neprozorno besedilo.

Lastnost opacity CSS se uporablja za nadzor motnosti elementov strani. Po specifikaciji velja za katero koli vrsto vozlišča in je podprt v vseh sodobnih brskalnikih. Z njegovo pomočjo lahko ustvarite zanimiv dizajn ali izvedete priročno interaktivno interakcijo z uporabnikom.

Možne vrednosti

Sintaksa za lastnost motnosti v css je videti takole:

Izbirnik (mosnost: 1;) izbirnik (prosojnost: 0;) izbirnik (prosojnost: 0,4;)

Kot vhod so sprejete številske vrednosti v območju od 0 do 1. Parameter je lahko ulomek enice, medtem ko se kot ločilo za cele in ulomne dele v CSS uporablja pika.

Element z ničelno prosojnostjo postane neviden, vendar še vedno zaseda svoje mesto na strani in ohrani možnost interakcije z uporabnikom.

Če je vrednost lastnosti drugačna od nič, se realna preglednost izračuna kot odstotek neke zgornje meje. Običajno motnost: 1 določa popolno motnost elementa.

Preglednost podrejenih vozlišč

Če pa ima element nadrejenega, katerega prosojnost se razlikuje od ene, se izračun spremeni. Potomec ne more biti "manj pregleden" od katerega koli od njegovih prednikov. Vrednost motnosti nadrejenega bloka postane zgornja meja otroške motnosti.

Nadrejeni (neprozornost: 0,7;) otrok (neprosojnost: 1;)

V tej situaciji bo podrejeni element 30 % pregleden, čeprav je motnost nastavljena na ena.

Primeri uporabe

Primer 1. Translucenca. Potrebno je, da je pod ciljnim elementom vidno glavno ozadje bloka.

Cilj (ozadje: črno; motnost: 0,5;)

Ne samo ozadje ciljnega bloka postane prosojno, ampak tudi besedilo.

Primer 2. Dinamična kontrola preglednosti. Vrednost lastnosti motnosti CSS ciljnega bloka se spremeni, ko miškin kazalec premaknete nanj.

Cilj (prosojnost: 0,2;) .target: lebdenje (prosojnost: 1;)

Dinamična preglednost

Zadnji primer dokazuje, da se pregledni elementi še naprej odzivajo na dogodke strani, kot je lebdenje. To vam omogoča uporabo javascripta za nadzor lastnosti motnosti CSS, pa tudi uporabo prehodnih in animacijskih mehanizmov za gladko spreminjanje načina prikaza.

Za dostop do preglednosti iz skripta se morate sklicevati na slogovni predmet določenega elementa.

// dobimo trenutno motnost var opacity = element.style.opacity; // nastavi novo vrednost element.style.opacity = 0,4;

Zbledenje bloka se lahko izvede z uporabo lastnosti prehoda CSS:

Element (prosojnost: 0,1; prehod: motnost 1000 ms;) element: lebdenje (modnost: 0,8; prehod: motnost 2000 ms;)

Zdaj bo vozlišče elementa spremenilo motnost od 10 do 80 % ob premikanju miške v eni sekundi, in ko kazalec zapusti, bo v dveh sekundah zbledel na prvotno vrednost.

Lastnost motnosti CSS v kombinaciji s prehodnim mehanizmom vam omogoča ustvarjanje čudovitih učinkov.

Alfa kanal namesto motnosti

Glavne tankosti mehanizma motnosti v CSS:

• njegov učinek se ne razširi samo na ozadje bloka, temveč tudi na njegovo besedilno vsebino, pri čemer je bolje, da ostane jasno;
• podrejeni elementi ne morejo biti manj pregledni kot nadrejeni elementi.

Če ti učinki otežujejo življenje oblikovalcu postavitve, namesto motnosti preprosto uporabite prozorno ozadje in določite njegovo vrednost v formatu RGBA ali HSLA.

Transparentnost v CSS je v zadnjem času precej trendovska tehnika in povzroča težave pri implementaciji med brskalniki. Do zdaj ni univerzalne metode za izvajanje preglednosti v vseh brskalnikih. V zadnjem času pa se je stanje opazno izboljšalo.

Ta članek podrobno preučuje obstoječe pristope ter nudi primere kode in pojasnila, ki vam pomagajo doseči enak rezultat v vseh brskalnikih z minimalnim naporom.

Druga točka, ki jo je vredno omeniti, je, da čeprav preglednost obstaja že nekaj let, nikoli ni bila del standarda CSS. To je nestandardna lastnost in bi morala biti del specifikacije CSS3.

Star pristop

V starejših različicah Firefoxa in Safarija morate lastnost uporabiti tako:

#myElement (-khtml-opacity: .5; -moz-opacity: 0.5;)

Lastnost -khtml-opacity je bila uporabljena v starejših različicah brskalnikov webkit. Ta lastnost je zastarela in ni več potrebna, razen če ste prepričani, da pomemben del prometa na vašem spletnem mestu prihaja od obiskovalcev, ki uporabljajo Safari 1.x, kar je seveda malo verjetno.

Naslednja vrstica uporablja lastnost -moz-opacity, ki je delovala na zelo zgodnjih različicah motorja Mozilla. Firefox je zanj prenehal podpirati v različici 0.9.

Preglednost CSS v Firefoxu, Safariju, Chromu in Operi

Za večino sodobnih brskalnikov zadostuje naslednja lastnost:

#myElement (prosojnost: .7;)

V zgornjem primeru je element nastavljen na vrednost motnosti 70 % (30 % motnost). To pomeni, da če nastavimo vrednost na ena, bo element neprozoren, zato bo nastavitev te vrednosti na nič neviden.

Lastnost motnosti obravnava 2 decimalni števki. To pomeni, da se bo vrednost ".01" razlikovala od vrednosti ".02", čeprav ni zelo opazna.

Preglednost CSS za Internet Explorer

Kot običajno Internet Explorer ni v prijateljskih odnosih z drugimi brskalniki. Poleg tega imamo zdaj v precej razširjeni uporabi tri različice tega brskalnika, pri čemer je nastavitev preglednosti v vsaki drugačna in včasih zahteva dodatne napore za doseganje pozitivnega rezultata.

#myElement (filter: alfa (mosnost = 40);)

Ta primer uporablja lastnost filtra, ki deluje v različicah 6-8, vendar obstaja ena omejitev za različice 6 in 7: lastnost hasLayout elementa mora biti nastavljena na true. Ta lastnost je prisotna samo v IE in več o njej si lahko preberete, na primer na Habréju.

Drug način za nastavitev preglednosti z uporabo CSS v IE8 je uporaba naslednjega pristopa (upoštevajte komentarje):

#myElement (filter: progid: DXImageTransform.Microsoft.Alpha (prosojnost = 40); / * deluje v IE6, IE7 in IE8 * / -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (prosojnost = 40)"; / * samo IE8 * /)

Prva vrstica bo delovala v vseh različicah, ki so trenutno v uporabi, druga samo v IE8. Upoštevajte, da druga vrstica uporablja predpono -ms- in vrednost je navedena v narekovajih.

Nastavitev in spreminjanje preglednosti CSS z uporabo JavaScript ali jQuery

Za nastavitev preglednosti lahko uporabite naslednjo kodo:

Document.getElementById ("myElement"). Style.opacity = ".4"; // za večino brskalnikov document.getElementById ("myElement"). style.filter = "alfa (mosnost = 40)"; // za IE

Seveda je v tem primeru veliko lažje uporabljati jQuery, poleg tega pa bo deloval v vseh brskalnikih:

$ ("# myElement"). css ((prosojnost: .4)); // deluje v vseh brskalnikih

To lastnost lahko animirate:

$ ("# myElement"). animate ((prozornost: .4), 1000, funkcija () (// Animacija končana; ta koda deluje v vseh brskalnikih.));

Funkcija RGBA

Predvidena je podpora alfa kanala v CSS3 s funkcijo rgba. Ta funkcija deluje v brskalnikih Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+. Uporablja se takole:

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

V tem primeru zadnji parameter označuje raven motnosti.

HSLA funkcija

Podobno kot pri prejšnji funkciji vam CSS3 omogoča tudi nastavitev polprosojne barve s funkcijo HSLA, katere parametri so Hue, Saturation, Lightness in Alpha channel.

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

Pomembna točka pri uporabi funkcij rgba in hsla je, da se nastavitev motnosti ne uporablja za podrejene elemente, medtem ko je lastnost motnosti podedovana.

Lastnost opacity CSS je odgovorna za preglednost elementov (slik, besedila, blokov) v html-ju.

Sintaksa neprosojnosti CSS

Kjer vrednost lahko zavzame realne vrednosti v območju od 0,0 do 1,0. Vrednost 1,0 pomeni, da ni preglednosti (privzeto).

Primer #1. Prozorna slika v html

Prva slika je prikazana brez prosojnosti, druga s prosojnostjo 0,5

Translucenca elementa

Naredite sliko polprozorno pri lebdenju!

DemoDownload vir

Hvala za pozornost!

Naslednji članek
Kako ustvariti drsni blok div?

orem Ipsum je preprosto navidezno besedilo tiskarske in pisateljske industrije. Lorem Ipsum je bilo standardno navidezno besedilo industrije vse od 1500-ih, ko je neznani tiskar vzel kuhinjo s črkami in jo premešal, da bi naredil vzorčno knjigo. Preživelo je ne le pet stoletij, temveč tudi skok v elektronsko pisavo. Populariziran je bil v šestdesetih letih prejšnjega stoletja z izdajo listov Letraset, ki vsebujejo odlomke Lorem Ipsum, in v zadnjem času s programsko opremo za namizno založništvo, kot je Aldus PageMaker, vključno z različicami Lorem Ipsum.
Že dolgo uveljavljeno dejstvo je, da bo bralca ob pogledu na postavitev strani zmotila berljiva vsebina strani. Bistvo uporabe Lorem Ipsum je v tem, da ima bolj ali manj normalno porazdelitev črk, v nasprotju z uporabo »Vsebina tukaj, vsebina tukaj«, zaradi česar je videti kot berljiva angleščina. Številni paketi za namizno založništvo in urejevalniki spletnih strani zdaj uporabljajo Lorem Ipsum kot privzeto besedilo modela, iskanje "lorem ipsum" pa bo odkrilo številna spletna mesta, ki so še v povojih. Z leti so se razvijale različne različice, včasih po naključju, včasih namerno (vbrizgan humor in podobno).

Torej, danes bomo govorili o preglednost v html strani. Verjetno ste naleteli na pregledne pojavne bloke, pa naj bo to fotogalerija ali prijavni obrazci na kakšnem priljubljenem spletnem mestu. Obstaja veliko uporab za preglednost v html-ju. Kako se torej izvaja in kje se lahko uporablja?

No, za začetek razumemo, da naš dokument nima samo ene ravnine monitorja - na splošno je tridimenzionalen, kot sem omenil v članku "Z-indeks". V skladu s tem bo tudi popolnoma prozorna plast, če se pojavi na vrhu sklada zaslona, ​​blokirala dostop do preostalih elementov. To je ena od glavnih uporab za prozorne škatle. Čeprav se običajno uporablja učinek senčenja, bo popolnoma prozoren sloj deloval na enak način. Tako na primer deluje veliko priljubljenih foto galerij, organiziran je zasenčen sloj, v katerem so prikazane fotografije, in nadzor zanje. Preostali del strani je "pokrit" s (pol)prozorno plastjo, ki blokira dostop do vseh ostalih elementov na strani. tiste. strani ne boste mogli zapustiti, če kliknete katero koli povezavo na njej - vse besedilo je prekrito s podlogo. Za vrnitev v telo spletnega mesta običajno zagotovijo kontrole za zapiranje galerije, prijavni obrazec itd. Nadzor prikazovanja/skrivanja prozornih blokov z uporabo javascripta. Tukaj, na žalost, ni alternative. Brez njegove uporabe uporabnik prozornega bloka sploh ne bo videl ali pa ga ne bo mogel zapreti, ne da bi zapustil trenutno stran. Upoštevajte, da se za to uporabljajo lastnosti vidnosti ali prikaza.

Kako je torej preglednost dejansko organizirana v html? Nastavitev preglednosti elementov na splošno ni vključena v specifikacijo CSS, zato morate za ustvarjanje uporabiti več navodil hkrati. Nekateri brskalniki (tj.) bodo delovali z eno možnostjo, drugi z drugo. To pomeni, da uporablja vgrajeno funkcijo filtra, drugi brskalniki uporabljajo lastnost "opacity", ki se giblje od 0 (popolnoma pregleden predmet) do 1 (popolnoma neprozoren). Na primer, v primeru 30-odstotne preglednosti napišite " motnost: 0,30; filter: alfa (mosnost = 30);". Lastnosti, kot lahko vidite iz primera, so podobne - le v prvem primeru je uporabljena številka od 0 do 1, v drugem pa odstotek. Primer takega bloka:

<div slog = "položaj: absolutno; zgoraj: 0; levo: 0; barva ozadja: rgb (18, 114, 214); širina: 100 %; id = "VideoFrame">

Primer uporablja blok za prikaz videa, ki se aktivira s klikom na sličico videoposnetka. Bloku ni dana višina, ker se lahko razlikuje glede na velikost zaslona in vsebino strani. V zvezi s tem se izračuna dinamično, ko se odpre video. Primer uporabe te tehnike si lahko ogledate na glavni strani spletnega mesta ruscircus.ru, na katerem sem nekoč delal.

To je vsa skrivnost preglednosti v html-ju. Za učinek preglednosti uporabljamo z-indeks in motnost. In za to lahko najdete veliko aplikacij - tukaj je vse omejeno le z vašo domišljijo.

08.02.2013 Odgovoril bom na vprašanja, zastavljena v komentarju, in sicer kako narediti neprozoren blok na prozornem bloku. Tukaj je vse preprosto, ni zaman, da sem v gradivu navedel povezavo do gradiva o z-indeksu, ustvariti morate še en blok, z večjim z-indeksom kot pregledni. Zdaj, v nekaj minutah, sem skiciral primer. Bloki:

<div slog = "položaj: absolutno; zgoraj: 0; levo: 0; barva ozadja: rgb (18, 114, 214); širina: 100 %; višina: 100 %; motnost: 0,30; filter: alfa (mosnost = 30); vidljivost: skrita; z-indeks: 1; " id = "VideoFrame"> <div id = slog "VideoFrame2" = "položaj: absolutno; zgoraj: 25 %; levo: 25 %; barva ozadja: bela; širina: 50 %; višina: 50 %; motnost: 0,99; filter: alfa (mosnost = 99); vidljivost: skrita; z-indeks: 2; " onclick = "javascript: HideForm ();" > Tukaj napišemo besedilo</ div>

In javascript funkcije

< script type= "text/javascript" >funkcija ShowForm () (document.getElementById ("VideoFrame") .style .visibility = "visible"; document.getElementById ("VideoFrame2") .style .visibility = "visible";) funkcija HideForm () (document.getElementById (" VideoFrame ") .style .visibility =" hidden "; document.getElementById (" VideoFrame2 ") .style .visibility =" hidden ";)

Prva funkcija prikaže prozoren blok (skupaj z neprozornim besedilnim blokom) - lahko ga pritrdite na gumb. povezava itd. Druga funkcija, ki jo imam, je vezana na klik z miško na blok z besedilom - skrije prosojni blok.

Upajmo, da je pojasnjeno, kako deluje. No, če ne, postavljajte vprašanja.