Ovaj članak upoznat će vas s konceptom koji će vam pomoći da shvatite neprozirnost sustava i reći vam kako kontrolirati ovaj parametar. U ovom će članku biti obrađeni sljedeći smjerovi,
- Neprozirnost u CSS-u
- Neprozirnost naslijeđena kaskadnim elementima
- Postavka RGBA atributa za kaskadne elemente
- Promjene neprozirnosti na efektu lebdenja
Neprozirnost pozadine elementa korisna je postavka značajke u HTML dizajnu. Postavljanjem razine neprozirnosti (obrnuto od prozirnosti), dizajner može kontrolirati vidljivost elementa putem CSS svojstva neprozirnosti. To se obično koristi kao postavka pozadine kad postoji kaskada elemenata postavljenih jedan iznad drugog.
Najčešći scenarij u kojem se koristi ova značajka je sljedeći:
- Djelomično prozirna pozadinska slika postavlja se iza elementa teksta.
- Pozadinska slika je mutno vidljiva, tako da ne dominira tekstom ispred.
- Slika može doći u puni fokus kada je korisnik izričito odluči vidjeti.
Možda biste željeli pročitati članak prije nego što nastavite s učenjem o neprozirnosti CSS-a.
Za cjelovit CSS tutorial posjetite Edureka CSS Vodič za početnike . Dobit ćete izvrsnu informaciju o načinu na koji će se CSS koristiti za proširenje HTML web dizajna.
Nastavljamo s ovim člankom o neprozirnosti u CSS-u
Neprozirnost u CSS-u
U CSS-u se neprozirnost postavlja kao numerička vrijednost u rasponu od 0,0 - 1,0. Vrijednosti bliže nuli predstavljaju veću transparentnost, slika će biti vrlo lagana u vidljivosti. Počnimo s primjerom slike koja se prikazuje s 50% prozirnosti. Pogledajte primjer 1 dolje.
Primjer 1: Pozadinska slika postavljena na polu- prozirnost
img {neprozirnost: 0,5 filtar: alfa (neprozirnost = 50) / * Za IE8 i starije * /} 
Primjer 1: Izlaz
Izvorna slika (100% neprozirnost)
Slika s postavkom neprozirnosti od 50%
U gornjem primjeru bio je samo jedan element - slika. Ostali se elementi također mogu postaviti s parametrom neprozirnosti, poput teksta, div elemenata i tako dalje.
Nastavljamo s ovim člankom o neprozirnosti u CSS-u
Neprozirnost naslijeđena kaskadnim elementima
Kada se elementi slažu jedan preko drugog, ako pozadinski element ima postavku neprozirnosti, tada ga nasljeđuju svi podređeni elementi. Ovo je tvorničke postavke . To znači da ako je tekstni okvir postavljen preko slike, a slika ima postavku neprozirnosti 0,5, tada će i slika i element teksta biti samo djelomično vidljivi.
kako koristiti skenere u javi -
Uzmimo primjerak podređenog tekstualnog elementa postavljenog preko slike TOM & JERRY u sljedećem primjeru. Zadani efekt neprozirnosti možemo vidjeti u primjeru 2.
.kontejner {pozicija: relativno poravnanje teksta: neprozirnost po sredini: 0,5} .centrirano {pozicija: apsolutni vrh: 50% lijevo: 50% pretvorba: prevođenje (-50%, -50%) boja: plava veličina fonta: 40px} } TOM & JERRYPrimjer 2: Tekst nasljeđuje neprozirnost od roditeljske slike
Nastavljamo s ovim člankom o neprozirnosti u CSS-u
osnovna struktura Java programa
Postavka RGBA atributa za kaskadne elemente
Postoji još jedan način na koji se neprozirnost može kontrolirati kaskadnim elementima. Ako želite da na podređeni element ne utječe neprozirnost pozadinskog elementa, tada možete koristiti Postavka RGBA atributa .
Primjer 3: Korištenje postavke RGBA
pozadina: rgba (76, 175, 80, 1.0) / * Slika nema postavku neprozirnosti * / / * Zelena podloga za tekst sa 100% neprozirnosti * / / * Tekst plave boje ima 100% neprozirnosti * /
pozadina: rgba (76, 175, 80, 0,4) / * Slika nema postavku neprozirnosti * / / * Zelena podloga za tekst s 40% neprozirnosti * / / * Još uvijek se vidi plavi tekst sa 100% neprozirnosti * /
Nakon RGB koda boje, atribut 'a' označava alfa . The alfa parametar je broj između 0,0 (potpuno proziran) i 1,0 (potpuno neproziran).
Nastavljamo s ovim člankom o neprozirnosti u CSS-u
Promjene neprozirnosti na efektu lebdenja
U nekim scenarijima web dizajneri žele da se neprozirnost razlikuje ovisno o tome je li korisnik usredotočen na element ili ne. Na primjer, recimo da je slika prema zadanim postavkama postavljena na 50% neprozirnosti. Međutim, kada korisnik zadrži miš iznad slike, tada želimo da slika dođe u puni fokus sa 100% neprozirnosti.
Primjer 4 pokazuje kako se to radi.
Zajedničke napomene:
- Postavljanje neprozirnosti alternativa je korištenju atributa 'vidljivost' u CSS-u. Međutim, upotreba postavke neprozirnosti olakšava postavljanje različitih stupnjeva prozirnosti, u rasponu od nule do pune.
- Razinu neprozirnosti treba postaviti nakon pažljivog testiranja u raznim preglednicima. Kad je neprozirnost postavljena na niske vrijednosti, ponekad tekst ili slika mogu postati potpuno nevidljivi ili nečitljivi.
- Ideja korištenja neprozirnosti jest usredotočiti se na neke elemente dok drugi pozadinski elementi ne odvlače pažnju korisnika. Tako su takvi pozadinski elementi postavljeni s nižom neprozirnošću.
- U Internet Exploreru, za IE8 i starije verzije, svojstvo neprozirnosti postavka je 'filtra' u rasponu od 1 do 100. U svim se ostalim preglednicima kreće od 0 do 1.
To nas dovodi do kraja ovog članka o neprozirnosti u CSS-u.
Ako vas zanima više o web-razvoju, pogledajte od Edureke. Obuka za certificiranje web razvoja pomoći će vam naučiti kako stvoriti impresivne web stranice pomoću HTML5, CSS3, Twitter Bootstrap 3, jQuery i Google API-ja i rasporediti ih na Amazon Simple Storage Service (S3).
Ako ste i dalje zainteresirani Ako imate bilo kakvo pitanje, možete ga objaviti u odjeljku za komentare na ovom blogu 'Neprozirnost u CSS-u', a mi ćemo vam se javiti u najkraćem mogućem roku.