Napravite prozirnu pozadinu u HTML-u i CSS-u (prozirnost i RGBA efekti)

Efekt prozirnosti element je jasno vidljiv na pozadinskoj slici i postao je raširen u različitim operativnim sustavima, jer izgleda elegantno i lijepo. Glavna stvar nije imati monokromatski uzorak ispod prozirnih blokova, već sliku, u ovom slučaju prozirnost postaje vidljiva.

Taj se učinak postiže na različite načine, uključujući staromodne tehnike poput korištenja PNG slike kao pozadine, stvaranja karirane slike i svojstva neprozirnosti. Ali čim postane potrebno napraviti prozirnu pozadinu u bloku, ove metode imaju neugodne nedostatke.

Razmislite o prozirnosti teksta i pozadine - kako to ispravno koristiti u dizajnu web stranice:

Glavna značajka ovog svojstva je da vrijednost transparentnosti utječe na svu djecu unutra, a ne samo na pozadinu. To znači da će i pozadina i tekst postati prozirni. Razinu transparentnosti možete povećati promjenom naredbe neprozirnosti s 0,1 na 1.

HTML 5 CSS 3 IE 9

U web dizajnu se također primjenjuje djelomična transparentnost koja se postiže kroz RGBA format boja koji se postavlja samo za pozadinu elementa.

Obično bi u dizajnu samo pozadina elementa trebala biti prozirna, a tekst bi trebao biti neproziran kako bi se zadržala čitljivost. Svojstvo neprozirnosti ovdje je neprikladno jer će tekst unutar elementa također biti djelomično proziran. Najbolje je koristiti RGBA format, čiji je dio alfa kanal, ili drugim riječima vrijednost transparentnosti. Vrijednost je napisana rgba, a zatim su vrijednosti komponenti crvene, plave i zelene boje navedene u zagradama odvojene zarezima. Posljednja je prozirnost, koja je postavljena od 0 do 1, pri čemu je 0 puna transparentnost, a 1 neprozirna boja za rgba sintaksu.

Prozirna pozadina HTML 5 CSS 3 IE 9

Prozirnost pozadine postavljena je na 90% - Poluprozirna pozadina i neproziran tekst.

Svojstvo opacity CSS koristi se za kontrolu neprozirnosti elemenata stranice. Prema specifikaciji, primjenjuje se na bilo koju vrstu čvora i podržan je u svim modernim preglednicima. Uz njegovu pomoć možete stvoriti zanimljiv dizajn ili implementirati prikladnu interaktivnu interakciju s korisnikom.

Moguće vrijednosti

Sintaksa za svojstvo neprozirnosti u css-u izgleda ovako:

Selektor (prozirnost: 1;) selektor (prozirnost: 0;) selektor (prozirnost: 0,4;)

Kao ulaz prihvaćaju se numeričke vrijednosti u rasponu od 0 do 1. Parametar može biti dio jedan, dok se točka koristi kao razdjelnik za cijele i razlomke u CSS-u.

Element s nultom transparentnošću postaje nevidljiv, ali i dalje zauzima svoje mjesto na stranici i zadržava mogućnost interakcije s korisnikom.

Ako je vrijednost svojstva različita od nule, tada će se stvarna transparentnost izračunati kao postotak neke gornje granice. Normalno, neprozirnost: 1 određuje punu neprozirnost elementa.

Transparentnost podređenih čvorova

Međutim, ako element ima roditelj čija se transparentnost razlikuje od jedne, izračun se mijenja. Potomak ne može biti "manje transparentan" od bilo kojeg od svojih predaka. Vrijednost neprozirnosti roditeljskog bloka postaje gornja granica neprozirnosti djeteta.

Roditelj (prozirnost: 0,7;) dijete (neprozirnost: 1;)

U ovoj situaciji, podređeni element bit će 30% transparentan, iako je neprozirnost postavljena na jedan.

Primjeri korištenja

Primjer 1. Translucencija. Potrebno je da se ispod ciljnog elementa vidi glavna pozadina bloka.

Cilj (pozadina: crna; neprozirnost: 0,5;)

Ne samo da pozadina ciljnog bloka postaje prozirna, već i tekst.

Primjer 2. Dinamička kontrola transparentnosti. Vrijednost svojstva CSS neprozirnosti ciljnog bloka mijenja se kada zadržite pokazivač iznad njega.

Cilj (neprozirnost: 0,2;) .cilj: lebdjeti (neprozirnost: 1;)

Dinamička transparentnost

Posljednji primjer pokazuje da transparentni elementi nastavljaju reagirati na događaje stranice kao što je lebdenje. To vam omogućuje korištenje javascripta za kontrolu svojstva neprozirnosti CSS-a, kao i korištenje mehanizama prijelaza i animacije za glatku promjenu načina prikaza.

Da biste pristupili transparentnosti iz skripte, trebate se obratiti na stilski objekt određenog elementa.

// dobivamo trenutnu neprozirnost var opacity = element.style.opacity; // postavlja novu vrijednost element.style.opacity = 0.4;

Blijeđenje bloka može se implementirati pomoću svojstva prijelaza CSS:

Element (prozirnost: 0,1; prijelaz: neprozirnost 1000 ms;) element: lebdenje (prozirnost: 0,8; prijelaz: neprozirnost 2000 ms;)

Sada će čvor elementa promijeniti neprozirnost od 10 do 80% pri lebdenju mišem unutar jedne sekunde, a kada kursor napusti, izblijedit će na svoju izvornu vrijednost u roku od dvije sekunde.

CSS svojstvo neprozirnosti, u kombinaciji s prijelaznim mehanizmom, omogućuje stvaranje prekrasnih efekata.

Alfa kanal umjesto neprozirnosti

Glavne suptilnosti mehanizma neprozirnosti u CSS-u:

• njegov učinak se proteže ne samo na pozadinu bloka, već i na njegov tekstualni sadržaj, što je poželjno ostaviti jasnim;
• podređeni elementi ne mogu biti manje transparentni od nadređenih elemenata.

Ako ti efekti otežavaju život dizajneru izgleda, umjesto neprozirnosti, trebali biste jednostavno koristiti prozirnu pozadinu, navodeći njezinu vrijednost u RGBA ili HSLA formatu.

Transparentnost u CSS-u je u posljednje vrijeme prilično trendi tehnika i uzrokuje poteškoće u implementaciji na više preglednika. Do sada ne postoji jedinstvena metoda za implementaciju transparentnosti u svim preglednicima. Međutim, u posljednje vrijeme situacija se znatno popravila.

Ovaj članak daje detaljan pregled postojećih pristupa i pruža primjere koda i objašnjenja koja će vam pomoći da postignete isti rezultat u svim preglednicima uz minimalan napor.

Još jedna stvar koju vrijedi spomenuti je da iako transparentnost postoji već nekoliko godina, ona nikada nije bila dio CSS standarda. Ovo je nestandardno svojstvo i trebalo bi biti dio CSS3 specifikacije.

Stari pristup

U starijim verzijama Firefoxa i Safarija, morate primijeniti svojstvo na sljedeći način:

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

Svojstvo -khtml-opacity korišteno je u starijim verzijama webkit preglednika. Ovo je svojstvo zastarjelo i više nije potrebno osim ako niste sigurni da značajan dio prometa vaše stranice dolazi od posjetitelja koji koriste Safari 1.x, što je, naravno, malo vjerojatno.

Sljedeći red koristi svojstvo -moz-opacity koje je radilo na vrlo ranim verzijama Mozilla motora. Firefox je prekinuo podršku za njega u verziji 0.9.

CSS transparentnost u Firefoxu, Safariju, Chromeu i Operi

Za većinu modernih preglednika dovoljno je sljedeće svojstvo:

#myElement (prozirnost: .7;)

U gornjem primjeru, element je postavljen na vrijednost neprozirnosti od 70% (30% neprozirnosti). Odnosno, ako postavimo vrijednost na jedan, tada će element biti neproziran i, sukladno tome, postavljanje ove vrijednosti na nulu učinit će ga nevidljivim.

Svojstvo neprozirnosti obrađuje 2 decimalne znamenke. Odnosno, vrijednost ".01" će se razlikovati od vrijednosti ".02", iako nije jako primjetna.

CSS transparentnost za Internet Explorer

Kao i obično, Internet Explorer nije u prijateljskim odnosima s drugim preglednicima. Osim toga, sada imamo tri verzije ovog preglednika u prilično raširenoj upotrebi, od kojih je postavka transparentnosti u svakoj drugačija i ponekad zahtijeva dodatne napore za postizanje pozitivnog rezultata.

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

Ovaj primjer koristi svojstvo filtera, koje radi u verzijama 6-8, ali postoji jedno ograničenje za verzije 6 i 7: svojstvo hasLayout elementa mora imati postavljeno na true. Ovo svojstvo postoji samo u IE-u i više o njemu možete pročitati, na primjer, na Habréu.

Drugi način postavljanja transparentnosti pomoću CSS-a u IE8 je korištenje sljedećeg pristupa (obratite pažnju na komentare):

#myElement (filter: progid: DXImageTransform.Microsoft.Alpha (prozirnost = 40); / * radi u IE6, IE7 i IE8 * / -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (prozirnost = 40)"; / * samo IE8 * /)

Prvi red će raditi u svim verzijama koje se trenutno koriste, drugi samo u IE8. Imajte na umu da drugi redak koristi -ms- prefiks, a vrijednost je navedena u navodnicima.

Postavljanje i promjena CSS transparentnosti pomoću JavaScripta ili jQueryja

Za postavljanje transparentnosti možete koristiti sljedeći kod:

Document.getElementById ("myElement"). Style.opacity = ".4"; // za većinu preglednika document.getElementById ("myElement"). style.filter = "alfa (prozirnost = 40)"; // za IE

Naravno, u ovom slučaju puno je lakše koristiti jQuery, osim toga, radit će u svim preglednicima:

$ ("# myElement"). css ((prozirnost: .4)); // radi u svim preglednicima

Ovo svojstvo možete animirati:

$("# myElement").animate ((prozirnost: .4), 1000, funkcija () (// Animacija dovršena; ovaj kod radi u svim preglednicima.));

RGBA funkcija

Planirano je podržati alfa kanal u CSS3 pomoću rgba funkcije. Ova značajka radi u Firefoxu 3+, Operi 10.1+, Chromeu 2+, Safariju 3.1+. Koristi se ovako:

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

U ovom slučaju, posljednji parametar označava razinu neprozirnosti.

HSLA funkcija

Slično prethodnoj funkciji, CSS3 također omogućuje postavljanje poluprozirne boje pomoću HSLA funkcije, čiji su parametri Hue, Saturation, Lightness i Alpha kanal.

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

Važna točka pri korištenju funkcija rgba i hsla je da se postavka neprozirnosti ne primjenjuje na podređene elemente, dok je svojstvo neprozirnosti naslijeđeno.

Svojstvo opacity CSS odgovorno je za transparentnost elemenata (slike, tekst, blokovi) u html-u.

CSS sintaksa neprozirnosti

Gdje vrijednost može poprimiti stvarne vrijednosti u rasponu od 0,0 do 1,0. Vrijednost 1,0 znači da nema transparentnosti (zadano).

Primjer #1. Prozirna slika u html-u

Prva slika se prikazuje bez prozirnosti, druga s prozirnošću od 0,5

Translucencija elementa

Učinite sliku poluprozirnom pri lebdenju!

DemoDownload izvor

Hvala na pažnji!

Sljedeći članak
Kako napraviti pomični div blok?

orem Ipsum je jednostavno lažni tekst tiskarske i pisateljske industrije. Lorem Ipsum bio je standardni lažni tekst u industriji još od 1500-ih, kada je nepoznati pisač uzeo galiju pisača i ispisao je kako bi napravio knjigu primjeraka tipa. Populariziran je 1960-ih s izdavanjem listova Letraset koji sadrže odlomke Lorem Ipsuma, a nedavno i softverom za stolno izdavaštvo kao što je Aldus PageMaker uključujući verzije Lorem Ipsuma.
Davno je utvrđena činjenica da će čitatelja odvratiti čitljivi sadržaj stranice kada pogleda njezin izgled. Smisao korištenja Lorem Ipsuma je da ima više-manje normalnu distribuciju slova, za razliku od korištenja "Sadržaj ovdje, sadržaj ovdje", što ga čini čitljivim engleskim. Mnogi paketi za stolno izdavaštvo i uređivači web stranica sada koriste Lorem Ipsum kao zadani model teksta, a potraga za "lorem ipsum" otkrit će mnoge web stranice koje su još u povojima. S godinama su se razvijale razne verzije, ponekad slučajno, ponekad namjerno (ubrizgani humor i slično).

Dakle, danas ćemo razgovarati o transparentnost u html-u stranicama. Vjerojatno ste naišli na prozirne skočne blokove, bilo da se radi o galeriji fotografija ili obrascima za prijavu na nekoj popularnoj web stranici. Transparentnost u html-u ima mnogo namjena. Dakle, kako se to radi i gdje se može koristiti?

Pa, za početak, shvatimo da naš dokument nema samo jednu ravninu monitora - on je, općenito govoreći, trodimenzionalan, kao što sam spomenuo u članku "Z-indeks". Sukladno tome, čak i potpuno proziran sloj, ako se pojavi na vrhu snopa prikaza, blokirat će pristup ostalim elementima. Ovo je jedna od glavnih upotreba prozirnih kutija. Iako se obično koristi efekt sjenčanja, potpuno proziran sloj će raditi na isti način. Tako, na primjer, radi puno popularnih foto galerija, organiziran je zasjenjeni sloj u kojem se prikazuju fotografije i kontrole za njih. Ostatak stranice je "prekriven" (polu)prozirnim slojem, blokirajući pristup svim ostalim elementima na stranici. Oni. nećete moći napustiti stranicu klikom na bilo koju vezu na njoj - sav je tekst prekriven podloškom. Za povratak na tijelo stranice obično pružaju kontrole za zatvaranje galerije, obrazac za prijavu itd. Kontrolirajte prikazivanje / skrivanje prozirnih blokova pomoću javascripta. Ovdje, nažalost, nema alternative. Bez korištenja, korisnik ili uopće neće vidjeti prozirni blok, ili ga neće moći zatvoriti bez napuštanja trenutne stranice. Imajte na umu da se za to koriste svojstva vidljivosti ili prikaza.

Dakle, kako je transparentnost zapravo organizirana u html-u? Postavljanje transparentnosti elemenata općenito nije uključeno u CSS specifikaciju, tako da morate koristiti nekoliko uputa odjednom da biste ga stvorili. Neki preglednici (tj.) će raditi s jednom opcijom, drugi s drugom. T.e. koristi ugrađenu funkciju filtra, drugi preglednici koriste svojstvo "prozirnost", koje se kreće od 0 (potpuno proziran objekt) do 1 (potpuno neproziran). Na primjer, u slučaju 30% transparentnosti, napišite " neprozirnost: 0,30; filter: alfa (prozirnost = 30);". Svojstva su, kao što možete vidjeti iz primjera, slična - samo u prvom slučaju koristi se broj od 0 do 1, u drugom unos postotka. Primjer takvog bloka:

<div stil = "položaj: apsolutni; vrh: 0; lijevo: 0; boja pozadine: rgb (18, 114, 214); širina: 100%; id = "VideoFrame">

Primjer koristi blok za prikaz videa koji se aktivira klikom na minijaturu videozapisa. Bloku nije dana visina jer može biti različita ovisno o veličini zaslona i sadržaju stranice. S tim u vezi, izračunava se dinamički kada se video otvori. Primjer korištenja ove tehnike može se vidjeti na glavnoj stranici web-mjesta ruscircus.ru, na kojoj sam svojedobno radio.

Ovo je cijela tajna transparentnosti u html-u. Koristimo z-indeks i neprozirnost da bismo dobili efekt transparentnosti. I za to možete pronaći mnogo aplikacija - ovdje je sve ograničeno samo vašom maštom.

08.02.2013 Odgovorit ću na pitanja postavljena u komentaru, naime, kako napraviti neprozirni blok na prozirnom bloku. Ovdje je sve jednostavno, nije uzalud u materijalu naznačio vezu na materijal o z-indeksu, trebate napraviti još jedan blok, s većim z-indeksom od prozirnog. Sada, za nekoliko minuta, skicirao sam primjer. blokovi:

<div stil = "položaj: apsolutni; vrh: 0; lijevo: 0; boja pozadine: rgb (18, 114, 214); širina: 100%; visina: 100%; neprozirnost: 0,30; filter: alfa (prozirnost = 30); vidljivost: skrivena; z-indeks: 1; " id = "VideoFrame"> <div id = "VideoFrame2" stil = "položaj: apsolutni; vrh: 25%; lijevo: 25%; boja pozadine: bijela; širina: 50%; visina: 50%; neprozirnost: 0,99; filter: alfa (prozirnost = 99); vidljivost: skrivena; z-indeks: 2; " onclick = "javascript: SakrijForm ();" > Ovdje pišemo tekst</ div>

I 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 =" skriven "; document.getElementById (" VideoFrame2 ") .style .visibility =" skriven ";)

Prva funkcija prikazuje prozirni blok (zajedno s neprozirnim blokom teksta) - može se pričvrstiti na gumb. link, itd. Druga funkcija koju imam vezana je za klik miša na blok s tekstom - skriva prozirni blok.

Nadam se da je pojasnio kako to radi. Pa, ako ne, postavljajte pitanja.