transparentna css slika. Kreiranje transparentne pozadine u HTML i CSS (prozirnost i RGBA efekti)

CSS transparentnost - rješenje za više pretraživača - 3.8 od 5 na osnovu 6 glasova

IN ovu lekciju pogledaćemo transparentnost CSS-a, naučiti kako dati razni elementi transparentnost stranice i postizanje pune kompatibilnosti među pretraživačima, odnosno isto djelovanje ovog efekta u različitim pretraživačima.

Kako postaviti transparentnost bilo kojeg elementa

U CSS3, svojstvo neprozirnosti je odgovorno za kreiranje transparentnih elemenata, koji se mogu primijeniti na bilo koji element. At datoj imovini postoje vrijednosti od 0 do 1, koje određuju stepen transparentnosti. Gdje je 0 puna transparentnost, (podrazumevana vrijednost za sve elemente), a 1 je puna neprozirnost. Vrijednosti se zapisuju kao razlomci: 0,1, 0,2, 0,3, itd.

Primjer upotrebe:

Transparentnost više pretraživača

Svi pretraživači ne percipiraju i implementiraju gornje svojstvo neprozirnosti na isti način. U nekim slučajevima potrebno je koristiti drugačije ime svojstva ili filtere.

CSS3 svojstvo neprozirnosti podržava sljedeće tipove Mozilla pretraživači 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.

Tako dobro :) kao pretraživač Internet Explorer do verzije 9.0 ne podržava svojstvo neprozirnosti i da biste kreirali transparentnost za ovaj pretraživač morate koristiti svojstvo filtera i vrijednost alpha(Opacity=X), u kojoj je X cijeli broj u rasponu od 0 do 100, koji određuje nivo transparentnosti. 0 je puna transparentnost, a 100 puna neprozirnost.

U vezi Firefox pretraživač prije verzije 3.5 podržava svojstvo -moz-opacity umjesto neprozirnosti.

Pretraživači kao što su Safari 1.1 i Konqueror 3.1, izgrađeni na KHTML mašini, koriste svojstvo -khtml-opacity za kontrolu transparentnosti.

Kako podesiti transparentnost u CSS-u tako da izgleda isto u svim pretraživačima? Da bi kreirali rješenje za transparentnost elemenata za više pregledača, oni moraju registrirati ne samo jedno svojstvo neprozirnosti, već sljedeći skup svojstava:

filter: alfa(Opacity=50); /* Transparentnost za IE */ -moz-opacity: 0.5; /* Podrška za Mozilla 3.5 i starije verzije */ -khtml-opacity: 0.5; /* Podrška za Konqueror 3.1 i Safari 1.1 */ opacity: 0.5; /* Podrška za sve ostale pretraživače */

Transparentnost različitih elemenata

Pogledajmo neke primjere postavljanja transparentnosti za određene elemente koji se najčešće koriste na stranici.

CSS transparentnost slike.

Razmotrite nekoliko opcija za stvaranje prozirne slike. IN sljedeći primjer prva slika nema transparentnost, druga ima 50% transparentnosti, treća 30%.

rezultat:

Transparentnost u CSS-u kada se lebdi iznad slike.

Često treba da se uradi transparentna slika ili bilo koji drugi element u trenutku kada se kursor pređe preko njega. Ovo se može uraditi pomoću :hover CSS pseudo-klase. Da bismo to uradili, naša slika treba da registruje dve klase, jednu običnu - ovo će biti neaktivno stanje slike i drugu klasu sa pseudo-klasom: lebdeći, ovde treba da navedete transparentnost slike u trenutku lebdeći kursorom.

Rezultat možete vidjeti u demou.

CSS transparentnost pozadine

Ovdje morate imati na umu da se transparentnost primjenjuje na sve ugniježđene elemente i da oni ne mogu imati veću transparentnost od ugniježđenog elementa.

Kao primjer, uzmimo varijantu s pozadinom stranice kreiranom pomoću slike i blok s pozadinom kreiranom u boji i koja ima prozirnost od 50%.

primjer koda:

Evo rezultata gornjeg koda:

Određuje nivo transparentnosti elementa web stranice. Uz djelomičnu ili potpunu transparentnost, pozadinska slika ili drugi elementi ispod prozirnog objekta pojavljuju se kroz element.

kratke informacije

Notacija

Vrijednosti

Vrijednost je broj iz raspona. Vrijednost 0 odgovara punoj transparentnosti elementa, 1, naprotiv, njegovoj neprozirnosti. Razlomci brojeva tip 0,6 set translucencije. Dozvoljeno je pisati brojeve bez početne nule, kao što je neprozirnost: .6 .

Sandbox

Winnie the Pooh uvijek nije bio nesklon malo osvježenja, posebno u jedanaest sati ujutro, jer je u to vrijeme doručak već odavno bio završen, a večera nije ni pomišljala da počne. I, naravno, užasno mu je bilo drago kada je vidio da Zec vadi šolje i tanjire.

div ( neprozirnost: 1 ; )

Primjer

Rezultat ovaj primjer prikazano na sl. jedan.

Rice. 1. Rezultat korištenja neprozirnosti

Objektni model

Objekt.style.opacity

Bilješka

Firefox do verzije 3.5 podržava svojstvo -moz-opacity.

Internet Explorer prije verzije 9.0 koristi filtere za promjenu transparentnosti, za ovaj pretraživač bi trebali napisati filter : alpha(opacity=50) , gdje parametar neprozirnosti može imati vrijednost od 0 do 100.

Specifikacija

Svaka specifikacija prolazi kroz nekoliko faza odobrenja.

• Preporuka (Recommendation) - specifikaciju je odobrio W3C i preporučuje se kao standard.
• Preporuka kandidata ( Moguća preporuka ) - grupa odgovorna za standard je zadovoljna da ispunjava svoje ciljeve, ali je za implementaciju standarda potrebna podrška razvojne zajednice.
• Predložena preporuka ( Predložena preporuka) - u ovoj fazi, dokument se dostavlja Savjetodavnom odboru W3C na konačno odobrenje.
• Radni nacrt – zreliji nacrt nakon rasprave i amandmana za reviziju zajednice.
• Nacrt urednika ( Urednički nacrt) je nacrt standarda nakon što su urednici projekta izvršili izmjene.
• nacrt ( Nacrt specifikacije) je prva verzija verzije standarda.

Transparentnost u CSS-u je prilično moderna tehnika U poslednje vreme, što uzrokuje poteškoće u implementaciji više pretraživača. Još uvijek ne postoji univerzalna metoda, što bi omogućilo transparentnost za sve pretraživače. Međutim, situacija se značajno popravila posljednjih godina.

Ovaj članak detaljno opisuje postojeće pristupe i pruža primjere koda i objašnjenja koja će vam pomoći da to postignete isti rezultat u svim pretraživačima 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 koje bi trebalo postati 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 se koristilo u starijim verzijama webkit pretraživača. Ovo svojstvo je 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 vjerovatno.

IN sljedeći red koristi svojstvo -moz-opacity, koje je radilo na vrlo ranim verzijama Mozilla motora. Firefox je prestao da ga podržava u verziji 0.9.

CSS transparentnost u Firefoxu, Safariju, Chromeu i Operi

Za većinu modernih pretraživača dovoljno je koristiti slijedeća nekretnina:

#myElement (prozirnost: .7; )

U gornjem primjeru, element je postavljen na 70% neprozirnosti (30% transparentnosti). Odnosno, ako postavimo vrijednost na jedan, tada će element biti neproziran i, shodno 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 je to jedva primjetno.

CSS transparentnost za Internet Explorer

Kao i obično, Internet Explorer nije prijateljski raspoložen sa drugim pretraživačima. Osim toga, sada imamo tri verzije ovog pretraživača u prilično širokoj upotrebi, od kojih je postavka transparentnosti u svakoj drugačija i ponekad zahtijeva dodatni napor da se dobije pozitivan rezultat.

#myElement (filter: alpha(opacity=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 biti postavljeno na true . Ovo svojstvo je prisutno samo u IE i više o njemu možete pročitati, na primjer, na Habré-u.

Drugi način za postavljanje transparentnosti koristeći CSS u IE8 je korištenje sljedećeg pristupa (obratite pažnju na komentare):

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

Prva linija će raditi u svim trenutno korištenim verzijama, druga - samo u IE8. Imajte na umu da drugi red koristi prefiks -ms- i da je vrijednost zatvorena pod 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 pretraživača document.getElementById("myElement").style.filter = "alpha(opacity=40)"; // za IE

Naravno, u ovom slučaju je mnogo lakše koristiti jQuery, a radit će i u svim pretraživačima:

$("#myElement").css(( neprozirnost: .4 )); // radi u svim pretraživačima

Ovu nekretninu možete animirati:

$("#myElement").animate(( opacity: .4 ), 1000, function() ( // Animacija je završena; ovaj kod radi u svim pretraživačima. ));

RGBA funkcija

CSS3 planira da podrži alfa kanal sa rgba funkcijom. Ova funkcija radi u Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+. Koristi se ovako:

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

U ovom slučaju posljednji parametar označava nivo neprozirnosti.

HSLA funkcija

Sviđa mi se prethodna funkcija, CSS3 vam takođe omogućava postavljanje prozirne boje pomoću HSLA funkcije, čiji parametri znače Hue (Nijansa), Saturation (Saturation), Brightness (Lightness) i Alpha kanal (Alpha).

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

Važna stvar kada se koriste funkcije rgba i hsla je da se postavka transparentnosti ne primjenjuje na podređene elemente, dok je korištenje svojstva neprozirnosti naslijeđeno.

Vlad Merzhevich

Djelomična transparentnost, kada se pravilno koristi, izgleda vrlo impresivno u dizajnu web stranice. Glavna stvar je da ispod prozirnih blokova ne bi trebao biti jednobojni uzorak, već slika, u ovom slučaju prozirnost postaje vidljiva. Ovaj efekat se postiže Različiti putevi i ako se sjećate svega, uključujući i staromodne metode, onda je ovo korištenje PNG slike kao pozadine, kreiranje karirane slike i svojstva neprozirnosti. Ali čim postane potrebno napraviti prozirnu pozadinu u bloku, ove metode imaju neugodnost Druga strana. ja ću uraditi mala recenzija da bude jasno šta u pitanju, kao i za one čitatelje koji nisu upoznati s netradicionalnim opcijama za stvaranje prozirnog efekta.

PNG kao pozadina

IN grafički uređivač preliminarno se priprema jednobojni prozirni crtež koji se pohranjuje u PNG-24 formatu (slika 1). Karakteristika ovog formata je podrška za 256 nivoa transparentnosti, ili jednostavno govoreći, može prikazati prozirne slike.

Rice. 1. Slika za kreiranje pozadine

Zatim dodajemo sliku kao pozadinu kroz svojstvo pozadine, kao što je prikazano u primjeru 1.

Primjer 1: Korištenje prozirnog uzorka

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Rezultat ovog primjera prikazan je na sl. 3.

Rice. 2. Nanošenje pozadine

Naslijeđeni pretraživač Internet Explorer 6 ne radi sa translucencijom u PNG-24, ako iz nekog razloga trebate podržati ovaj pretraživač, morat ćete koristiti skripte za njega.

Predstavljena metoda ima niz ograničenja. Dakle, kada isključite slike u pretraživaču, pozadina će potpuno nestati. Osim toga, nije tako lako promijeniti boju pozadine i vrijednost prozirnosti, za to ćete morati ponovo urediti sliku.

karirana slika

Ova metoda spada u drevne načine implementacije translucencije, kada pretraživači „ništa nisu mogli“, a morali ste tražiti rješenja koja nisu šablonska. Trik je u stvaranju slike koja se mijenja između prozirnih i neprozirnih piksela (slika 3). Takva pravilna struktura stvara efekat prozračnosti, u suštini ga imitirajući.

Rice. 3. Uvećani karirani uzorak

Evo kako to izgleda na kraju (slika 4).

Rice. 4. Imitacija translucencije

Nedostaci ove metode su uporedivi sa prethodnim, mogu se pojaviti i moire uzorci i dolazi do degradacije teksta.

svojstva neprozirnosti

Svojstvo neprozirnosti CSS 3 postavlja vrijednost transparentnosti i kreće se od 0 do 1, gdje je nula puna transparentnost elementa, a jedan, naprotiv, neprozirnost. Svojstvo neprozirnosti ima svojstvo - transparentnost se primjenjuje na sve podređeni elementi, i ne mogu premašiti vrijednost transparentnosti svog roditelja. Ispostavilo se da na prozirnoj pozadini ne može biti neprozirnog teksta (primjer 2).

Primjer 2: Korištenje neprozirnosti

XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx

Rezultat primjera prikazan je na sl. pet.

Rice. 5. Translucencija teksta i pozadine

U Internet Exploreru do i uključujući verziju 8.0, neprozirnost ne radi, pa se za to koristi svojstvo filtera specifičnog za pretraživač. Naravno, to rezultira nevažećim CSS kodom.

RGBA

Moderni pristup je mnogo jednostavniji i vizualniji od gore navedenih metoda i sastoji se od korištenja RGBA formata za boju i pozadinu. Prva tri slova su poznata mnogima i označavaju crvenu, zelenu, plavu (crvenu, zelenu, plavu), posljednje simbolizira alfa kanal i postavlja transparentnost elementa. Format zapisa je ovaj.

boja pozadine: rgba(r, g, b, a);

U zagradama se umjesto slova stavlja vrijednost komponente boje, može se vidjeti u bilo kojem grafičkom uređivaču, zadnja vrijednost postavlja transparentnost i odgovara vrijednosti svojstva neprozirnosti.

Ne podržavaju svi pretraživači ovaj format: Internet Explorer od verzije 9, Opera od verzije 10, Firefox od verzije 3, Safari od verzije 3.2. Ali generalno, moderni pretraživači ispravno prikazati transparentnost. Za starije verzije IE-a možete posebno odrediti boju u uobičajenom formatu, dok, naravno, neće biti transparentnosti. Ili ponovo koristite svojstvo filtera, ali tada se morate pomiriti sa činjenicom da će i transparentnost uticati na tekst (primjer 3). Da bih nametnuo važeći CSS kod, koristio sam uslovne komentare.

Primjer 3: Korištenje RGBA

HTML5 CSS3 IE Cr Op Sa Fx

Rezultat primjera može se vidjeti na sl. 6.

Rice. 6. Polu-transparentna pozadina sa neprozirnim tekstom

Uporedite sliku sa prethodnom, slova su postala svetlija i jasnija.

IN Internet pretraživač Explorer 7 je pronašao grešku prilikom kombinovanja boje pozadine sa različite vrijednosti. Na primjer, ako boju pozadine postavite na crvenu, kao što je prikazano ispod, tada se pozadina u IE7 neće uopće prikazati.

Div (boja pozadine: crvena; /* Nije primjenjivo u IE7 */ boja pozadine: rgba(255, 0, 0, 0.5); )

Ovo se rješava zamjenom svojstva background-color sa background.

Div ( background: red; /* I ovo radi */ background: rgba(255, 0, 0, 0.5); ) Međutim, postoji jedno upozorenje. CSS validator "psuje" u pozadinu ako ga postavite na RGBA format. Ali u isto vrijeme, ispravno se primjenjuje na boju pozadine. Općenito, kao i uvijek, morate birati između pretraživača i valjanosti.

Sa pojavom CSS3, rad dizajnera izgleda postao je mnogo jednostavniji i logičniji: na kraju krajeva, sada zaista možete fleksibilno konfigurirati bilo koji objekat, pribjegavajući JavaScriptu sve manje i manje. Recimo da trebate podesiti transparentnost pozadine - CSS odmah nudi nekoliko opcija.

Pozadina je određena skupom atributa, background-repeat, background-attachment, background-origin, background-clip, background-color), a svaki od njih se može specificirati zasebno ili kombinovati pod atributom pozadine. Analizirajmo svaki od njih detaljnije.

atribut boje pozadine

Čak i IE8 podržava ovu metodu. Više pozadinskih slika se koristi kada gumeni raspored. Najvažnije, ne zaboravite, kada koristite bilo koju sliku, također postavite css boja pozadinu, jer korisnici možda jednostavno neće učitati sliku.

atribut pozadinske pozicije

Ako koristite sliku za postavljanje pozadine bloka, CSS će vam omogućiti da postavite sliku bilo gdje na ekranu. Podrazumevano, slika je pozicionirana na lijevoj strani gornji ugao. Atribut prihvaća ili verbalne indikacije (gore, dolje, lijevo, desno) ili numeričke indikacije (procenti, pikseli i druge mjerne jedinice). U ovom slučaju morate navesti dvije vrijednosti: vodoravno i okomito:

tijelo (položaj pozadine: desno središte;) - u ovom primjeru, pozadina će se nalaziti na desnoj strani stranice, a donja i gornja udaljenost do slike su ista.

atribut veličine pozadine

Ponekad je potrebno sa koristeći CSS rastegnite pozadinu ili smanjite njenu veličinu. Da biste to učinili, koristite atribut background-size, a veličina pozadine može se postaviti iu pikselima ili procentima, iu bilo kojoj drugoj mjernoj jedinici.

Postoje neki problemi sa ovim atributom: for ispravan prikaz pozadina u ranijim verzijama pretraživača mora koristiti prefikse. svakako, trenutne verzije u potpunosti podržavaju ovaj atribut i nema potrebe za posebnim svojstvima.

background-attachment atribut

Ovaj atribut specificira ponašanje pozadinska slika prilikom pomeranja. Dakle, može uzeti 3 vrijednosti (ne uzimajući u obzir nasljeđivanje, što je zajedničko za sve atribute predstavljene u ovom članku):

• fiksno- čini sliku na pozadini nepomičnom;
• skrolujte- pozadina se pomiče zajedno sa ostalim elementima;
• lokalni- slika na pozadini se pomera ako sadržaj ima pomeranje. Pozadina koja nadilazi sadržaj je fiksna.

Primjer upotrebe:

tijelo (fiksirani prilog za pozadinu).

Firefox trenutno ne podržava posljednje svojstvo (lokalno).

background-origin atribut

Ovaj atribut je odgovoran za pozicioniranje elementa. Pregledači rane verzije zahtijevaju upotrebu prefiksa. Sama imovina ima tri parametra:

• padding box pozicionira pozadinu u odnosu na ivicu, uzimajući u obzir debljinu okvira;
• granična kutija razlikuje se od prethodnog svojstva po tome što granična linija može u potpunosti ili djelomično preklapati pozadinu;
• kutija sa sadržajem pozicionira sliku, pričvršćujući je na sadržaj.

Ako je dato više vrijednosti, pretraživači mogu drugačije reagirati: Firefox i Opera prihvaćaju samo prvu opciju.

background-repeat atribut

Općenito, ako je pozadina postavljena na sliku, treba je ponoviti horizontalno ili okomito. Tome služi atribut background-repeat. Na primjer, pozadina bloka čiji CSS sadrži takvo svojstvo može imati jednu od nekoliko opcija:

• bez ponavljanja- slika se pojavljuje na stranici u jednoj verziji;
• ponovi- pozadina se ponavlja duž x i y osa;
• ponoviti x- samo horizontalno;
• repeat-y- samo vertikalno;
• prostor- pozadina se ponavlja, ali ako se prostor ne može popuniti, pojavljuju se praznine između slika;
• round- slika je skalirana ako nije moguće popuniti cijelo područje cijelim slikama.

Primjer korištenja atributa:

tijelo (ponavljanje u pozadini: ponavljanje bez ponavljanja)- slično background-repeat: repeat-y.

U CSS3 je moguće postaviti vrijednosti za više slika navođenjem opcija odvojenih zarezima.

background-clip atribut

Ovaj atribut definira ponašanje pozadine ispod granica (na primjer, u slučaju isprekidanih granica):

• padding box- pozadina se prikazuje striktno unutar bloka;
• granična kutija- slika ide ispod okvira;
• kutija sa sadržajem— slika na pozadini se pojavljuje samo unutar sadržaja.

Primjer upotrebe:

tijelo (background-clip: content-box;).

Chrom i Safari zahtijevaju upotrebu prefiksa -webkit-.

atributi neprozirnosti i filtera

Atribut neprozirnosti vam omogućava da postavite transparentnost pozadine - CSS svojstvo će raditi u svim pretraživačima. Vrijednost je postavljena između 0,0 i 1,0 uključujući. Ovim možete podesiti transparentnost css pozadina bez cjelobrojne vrijednosti: umjesto 0,3 dovoljno je napisati .3:

.block (pozadinska slika: url(img.png); neprozirnost: .3;).

Da biste postavili prozirnost pozadine, čiji je CSS pogodan čak i za IE ispod devete verzije, koristite atribut filtera:

.block (pozadinska slika: url(img.png); filter: alpha(opacity=30);).

U ovom slučaju, vrijednost neprozirnosti je postavljena između 0 i 100. Imajte na umu da se atribut neprozirnosti razlikuje od postavke transparentnosti sa koristeći RGBA nasljeđivanje: kada se koristi neprozirnost, ne samo da pozadina postaje transparentna, već i svi elementi unutar bloka.

Uvijek držite na oku statistiku korištenja pretraživača za CIS i sve druge zemlje. Najviše veliki problem od svih dizajnera izgleda su stare verzije IE, oni su ti koji ne dozvoljavaju punu upotrebu CSS3. Prilikom rasporeda ne zaboravite koristiti posebne usluge, koji provjerava podržava li vaš pretraživač bilo koji css svojstvo. Ako ne možete instalirati starije verzije pretraživača, pronađite servis koji će provjeriti web lokaciju različitim pretraživačima online.