Želite li naučiti kako kreirati stranice s originalnim i svijetlim modernim dizajnom? Upotreba prozirnih elemenata može vam pomoći u rješavanju ovog teškog problema. Danas ćemo pogledati glavne praktične načine postavljanja transparentnosti strukturnih elemenata.

Kako podesiti transparentnost?

Ako ovu temu razmotrimo kroz prizmu istorijskog razvoja web tehnologija, možemo razlikovati sljedeće pristupe:

• Nekretnina neprozirnost.
• Upotreba PNG-Slike
• Sistemski format RGBA
• Pa, i na kraju, antičke ili karirane slike.

CSS svojstvo neprozirnosti

Primjena stila CSS svojstva neprozirnost omogućava vam da postavite transparentnost elementa na koji se primjenjuje. Vrijednosti koje se mogu koristiti kao argument su u rasponu od 0 do 1.
Pogledajmo primjer.

< html> < head> < title>TODO dostaviti naslov < meta charset= "UTF-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "css/style2.css" /> < body> < div class = " prozrachen " >Ovdje će biti dosta vašeg teksta

/* Pozadina za tijelo stranice */) . transparentan (odsječak: 10px; /*Uvlake za tekst*/ pozadina: tamnotirkizna; /* Postavite boju pozadine */ margina: 0 auto; /* Centrirajte blok */širina: 50%; /* Postavite širinu bloka */ neprozirnost: 0,7 ; /* Postavi transparentnost */ font: 48px/ 64px Times New Roman; text- align: justify; )

Kao rezultat, dobili smo prozirni blok:

Bitan!!!

1. Opacity uzima vrijednosti iz raspona: 0 (puna transparentnost) – 1 (prozirnost).
2. Kompatibilnost među pretraživačima. IN I.E. do verzije sedam uključujući Opacity nije podržan. Sljedeća linija će pomoći da se postigne isti prikaz elementa:

   filter: alfa(Neprozirnost= 70) ;

   Vrijedno je uzeti u obzir da je nekretnina filter nedostaje od html specifikacije, mijenja vrijednosti od 1 do 100 i može se primijeniti samo na elemente:

   • sa apsolutnim pozicioniranjem ( pozicija: apsolutna)
   • sa fiksnom linearnom veličinom ( visina ili širina).
3. Stepen transparentnosti nasljeđuju podređeni elementi, a podređeni element može povećati svoju transparentnost, ali je ne može učiniti manjom. To jest, ne možete napraviti NEPROZIRNI tekst na prozirnoj pozadini.

Za bolje razumijevanje materijala u posljednjem pasusu, u prethodnom primjeru ćemo boju teksta postaviti na bijelu

boja: bijela;

i pogledaj to pod mikroskopom:

Kao što vidite, sadržaj našeg bloka (tekst) je također postao proziran. Ali šta ako vas u praksi ne zanima transparentnost sadržaja, već samo transparentnost pozadine? U tom slučaju prijeđite na sljedeću tačku.

Korištenje PNG slika

Zanimljiva karakteristika formata PNG je da ima 256 nivoa transparentnosti. Mislim da ste uhvatili tok misli i vjerovatno ste već izgradili algoritam kako ovaj pristup funkcionira. Sve što mogu je da izgovorim.

Kao rezultat, dobili smo blok s prozirnom pozadinom i neprozirnim sadržajem:

Bitan!!!

1. Za razliku od imovine neprozirnost transparentnost je postavljena samo za pozadinu
2. Kompatibilnost među pretraživačima. Radi u skoro svim pretraživačima, što je plus. Ali transparentnost PNG nije podržan u IE6. Ako optimizirate svoju stranicu za takvu starinu, morat ćete koristiti druge metode ili skripte.
3. Kada isključite prikaz slika, vaša pozadina će nestati (uzmite to u obzir prilikom optimizacije prikaza na mobilnim uređajima, jer neograničeni internet nije uvijek pri ruci).
4. Da biste promijenili boju i/ili stepen transparentnosti, potrebno je da kreirate novu sliku i otpremite je na server.

RGBA sistemski format

Jedna od najmodernijih metoda promjene transparentnosti pozadine je korištenje sistema RGBA.

RGBA– sistem predstavljanja boja pomoću tri standardna kanala RGB(crvena, zelena, plava), a četvrta, tzv Alpha-kanal koji karakteriše stepen transparentnosti.

pozadina: rgba(r, g, b, a) ;

U već poznatom primjeru, sadržaj zamjenjujemo u CSS datoteku na sljedeće:

tijelo (pozadina: url(./ vaden- pro- logo. png) ; /* Pozadinska slika */) . prozračen ( padding: 10px; pozadina: rgba(0 , 206 , 209 , 0.7 ) ; margina: 0 auto; širina: 50%; font: 48px/ 64px Times New Roman; boja: bijela; text-align: justify; )

Bitan!!!

1. Za razliku od imovine neprozirnost transparentnost je postavljena samo na pozadinu
2. Za razliku od metode PNG slike, za promjenu boje ili stepena transparentnosti samo trebamo promijeniti vrijednosti rgba.
3. Kompatibilnost među pretraživačima. Radi u svim modernim pretraživačima (od IE9, Op10, Fx3,Sf3.2).Za starije pretraživače ćete morati ili žrtvovati transparentnost ili koristiti neprozirnost, png metode.

Karirane slike, ili s obzirom na istoriju

Ova metoda je bila na početku web dizajna, a uvidjela je stare, stare pretraživače koji zapravo nisu mogli ništa. Sastoji se od kreiranja karirane pozadine u kojoj se obojeni kvadrati izmjenjuju s prozirnim.

Kao rezultat korištenja takve slike kao pozadine, dobivena je pseudotransparentna pozadina.

Bitan!!!

1. Kada gledate tekst na takvoj pozadini, vaše oči mogu brzo postati umorne (mrebanje pri pomicanju je posebno opresivno).
2. Inače, karakteristike aplikacije su slične metodi „PNG slika“.

Hajde da sumiramo?

• Ispod prozirnog bloka trebala bi biti svijetla, nemonotona slika. Na monohromatskoj pozadini gubi se vrhunac transparentnosti.
• Prilikom odabira konkretnog praktičnog pristupa, vodite se prema pretraživačima koje vaša ciljna publika koristi. Kompatibilnost među pretraživačima je važna.

U ovoj lekciji ćemo pogledati takve CSS svojstva - neprozirnost I RGBA. Nekretnina Opacity odgovoran je samo za transparentnost elemenata i funkcije RGBA– za boju i transparentnost, ako navedete vrijednost prozirnosti alfa kanala.

CSS transparentnost Prozirnost

Digitalna vrijednost za neprozirnost postavljeno u rasponu od 0,0 do 1,0, gdje je nula potpuna transparentnost, a jedan je, naprotiv, apsolutna neprozirnost. Na primjer, da biste vidjeli 50% transparentnosti, trebate postaviti vrijednost na 0,5. To se mora imati na umu neprozirnost propagira na sve podređene elemente roditelja. To znači da će i tekst na prozirnoj pozadini biti proziran. A to je vrlo značajan nedostatak, tekst se ne ističe tako dobro.

Snimak ekrana jasno pokazuje da je crni tekst postao proziran kao i plava pozadina.

Div (
pozadina: url(images/yourimage.jpg); /* Pozadinska slika */
širina: 750px;
visina: 100px;
margina: auto;
}
.plava (
pozadina: #027av4; /* Prozirna boja pozadine */
neprozirnost: 0,3; /* Vrijednost prozirnosti pozadine */
visina: 70px;
}
h1 (
padding: 6px;
porodica fontova: Arial Black;
font-weight: bolder;
veličina fonta: 50px;
}

CSS transparentnost u RGBA formatu

Format za snimanje u boji RGBA, je modernija alternativa za nekretninu neprozirnost. R (crvena), G (zelena), B (plava)- znači: crvena, zelena, plava. Poslednje pismo A– označava alfa kanal, koji postavlja transparentnost. RGBA Za razliku od Opacity ne utiče na podređene elemente.

Pogledajmo sada naš primjer korištenja RGBA. Zamenimo ove linije u stilovima.

Pozadina: ##027av4; /* Boja pozadine */
neprozirnost: 0,3; /* vrijednost prozirnosti pozadine */

do sledećeg reda

Pozadina: rgba(2, 127, 212, 0.3);

Kao što vidite, vrijednost transparentnosti od 0,3 je ista za obje metode.

Rezultat RGBA primjera:

Drugi screenshot izgleda mnogo bolje od prvog.

Igrajući se sa prozirnošću pozadine blokova, možete postići zanimljive efekte na svojoj web stranici. Važno je da ovi prozirni blokovi budu na vrhu šarenog dizajna, kao što je fotografija. Samo u ovom slučaju efekat će biti vidljiv. Ova tehnika se dugo koristila u dizajnu, čak i prije pojave bilo koje CSS3, implementiran je isključivo u grafičkim programima.

Ako kupac traži da izgled izgleda dobro u starijim verzijama pretraživača Internet Explorer, zatim dodajte svojstvo filter i ne zaboravite komentirati kako to ne bi utjecalo na valjanost koda.

Zaključak

Format RGBA podržavaju sve moderne pretraživače, osim Internet Explorer. Takođe je veoma važno da RGBA fleksibilan, djeluje samo na određeni specificirani element, bez utjecaja na njegovu djecu. Jasno je da je ovo pogodnije za dizajnera izgleda. Moj izbor svakako ide u prilog formatu RGBA za dobijanje transparentnost u CSS-u.

Za bolju konsolidaciju materijala i veću jasnoću, predlažem da prođete.

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

U ovoj lekciji ćemo se osvrnuti na transparentnost CSS-a, naučiti kako dati transparentnost različitim elementima stranice i postići punu kompatibilnost među pretraživačima, tj. ovaj efekat će raditi isto 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. Ovo svojstvo ima vrijednosti od 0 do 1, koje određuju stepen transparentnosti. Gdje je 0 puna transparentnost (podrazumevana vrijednost za sve elemente), a 1 puna neprozirnost. Vrijednosti se zapisuju kao razlomci: 0,1, 0,2, 0,3, itd.

Primjer upotrebe:

Transparentnost među pretraživačima

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.

Svojstvo neprozirnosti CSS3 podržavaju sljedeći tipovi pretraživača: Mozilla 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.

Tako dobro :) pretraživač poput Internet Explorera 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 raspon od 0 do 100, koji određuje nivo transparentnosti. 0 je potpuno transparentno, a 100 je potpuno neprozirno.

Od Firefoxa 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 možete postaviti 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 specificirati ne samo jedno svojstvo neprozirnosti, već sljedeći skup svojstava:

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

Transparentnost raznih elemenata

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

CSS transparentnost slike.

Pogledajmo nekoliko opcija za stvaranje prozirne slike. U sljedećem primjeru, prva slika nema postavljenu transparentnost, druga ima prozirnost od 50%, a treća ima 30%.

rezultat:

Transparentnost u CSS-u kada se lebdi iznad slike.

Često je potrebno učiniti sliku ili bilo koji drugi element transparentnim u trenutku kada kursor lebdi iznad njega. To možete učiniti koristeći CSS pseudo-klasu:hover. Da bismo to učinili, našoj slici treba dodijeliti dvije klase, jednu normalnu - ovo će biti neaktivno stanje slike, a drugu klasu sa pseudo-klasom: lebdjeti, ovdje morate odrediti transparentnost slike u ovom trenutku od pomeranja kursora.

Rezultat možete vidjeti u demou.

Transparentnost pozadine pomoću CSS-a.

Ovdje je potrebno zapamtiti da se transparentnost odnosi na sve ugniježđene elemente i da oni ne mogu imati veću transparentnost od ugniježđenog elementa.

Kao primjer daćemo varijantu sa pozadinom stranice kreiranom pomoću slike i blokom sa pozadinom kreiranom u boji i koja ima prozirnost od 50%.

Primjer koda:

Evo rezultata koda objavljenog iznad:

Vlad Merzhevich

Djelomična transparentnost, kada se pravilno koristi, izgleda vrlo impresivno u dizajnu web stranice. Glavna stvar je da ispod prozirnih blokova ne postoji monokromatski dizajn, već slika; u tom slučaju postaje vidljiva transparentnost. Ovaj efekat se postiže na mnogo načina, a ako se sjetite svih, uključujući i staromodne metode, koristi se PNG slika kao pozadina, kreiranje karirane slike i svojstva neprozirnosti. Ali čim se pojavi potreba da se napravi prozirna pozadina u bloku, ove metode imaju neugodnu lošu stranu. Napraviću kratku recenziju da bude jasno o čemu pričamo, kao i za one čitatelje koji nisu upoznati s netradicionalnim opcijama za stvaranje prozirnog efekta.

PNG kao pozadina

U grafičkom uređivaču prvo se priprema jednobojni prozirni crtež koji se pohranjuje u PNG-24 formatu (slika 1). Posebnost ovog formata je da podržava 256 nivoa transparentnosti, ili jednostavno rečeno, 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. Primjena pozadinske slike

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.

Gornja metoda ima niz ograničenja. Dakle, kada onemogućite slike u pretraživaču, pozadina će potpuno nestati. Osim toga, nije tako lako promijeniti boju pozadine i vrijednost prozirnosti; da biste to učinili, morat ćete ponovo urediti sliku.

Karirana slika

Ova metoda se odnosi na potpuno drevne metode implementacije translucencije, kada pretraživači "nisu mogli ništa" i bilo je potrebno tražiti nestandardna rješenja. Trik je u stvaranju slike koja se mijenja između prozirnih i neprozirnih piksela (slika 3). Ova pravilna struktura stvara proziran efekat, u suštini ga imitirajući.

Rice. 3. Uvećani karirani uzorak

Ovako to izgleda na kraju (slika 4).

Rice. 4. Simulirajte prozirnost

Nedostaci ove metode su uporedivi s prethodnim; može se pojaviti i moiré uzorak i tekst će se pogoršati.

Svojstvo neprozirnosti

CSS 3 svojstvo neprozirnosti specificira vrijednost neprozirnosti i kreće se od 0 do 1, gdje je nula potpuna transparentnost elementa, a jedan je, naprotiv, neproziran. Svojstvo neprozirnosti ima posebnu karakteristiku - transparentnost se primjenjuje na sve podređene elemente i oni ne mogu premašiti vrijednost neprozirnosti svog roditelja. Ispostavilo se da ne može biti neprozirnog teksta na prozirnoj pozadini (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. 5.

Rice. 5. Translucencija teksta i pozadine

U verzijama Internet Explorera do i uključujući 8.0, neprozirnost ne radi, tako da koristi svojstvo filtera specifično za pretraživač. Naravno, ovo 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 boje i pozadine. Prva tri slova su poznata mnogima i označavaju crvenu, zelenu, plavu (crvenu, zelenu, plavu), posljednje simbolizira alfa kanal i postavlja transparentnost elementa. Format snimanja je sljedeći.

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

U zagradi, umjesto slova, stavlja se vrijednost komponente boje, može se vidjeti u bilo kojem grafičkom uređivaču; posljednja vrijednost postavlja transparentnost i poklapa se sa vrijednošću 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 općenito, moderni pretraživači ispravno prikazuju transparentnost. Za starije verzije IE-a možete zasebno odrediti boju u svom uobičajenom formatu i, naravno, neće biti transparentnosti. Ili ponovo koristite svojstvo filtera, ali tada ćete morati da se pomirite sa činjenicom da će i transparentnost uticati na tekst (primer 3). Da bih održao 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. Prozirna pozadina sa neprozirnim tekstom

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

Greška je otkrivena u Internet Explorer-u 7 prilikom kombinovanja boje pozadine sa različitim vrednostima. Na primjer, ako boju pozadine postavite na crvenu, kao što je prikazano ispod, pozadina u IE7 se uopće neće pojaviti.

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 se žali na pozadinu kada mu je data vrijednost u RGBA formatu. Ali u isto vrijeme ispravno se odnosi na boju pozadine. Općenito, kao i uvijek, morate birati između pretraživača i valjanosti.

Kako postaviti transparentnu boju u css? Trenutno postoje 3 načina da to učinite.

Metoda 1 - transparentna vrijednost

Ako vrijednost teksta ili boje pozadine postavite na transparentno, boja će biti potpuno transparentna, odnosno nevidljiva. primjer:

Boja: transparentna;

Takav tekst neće biti vidljiv na stranici.

Metoda 2 - rgba režim boja

A ovo je css3 inovacija. Ranije u web razvoju nije postojao takav način rada, postojao je samo rgb. Sigurno znate kako snimiti boju u ovom formatu. Da biste to učinili, trebate navesti tri vrijednosti u zagradama od 0 do 255, što ukazuje na zasićenost jedne od tri osnovne boje (crvena, zelena, plava). Na primjer:

Pozadina: rgb(230, 121, 156);

Rgba format se ne razlikuje, samo dodaje četvrtu vrijednost - stepen transparentnosti elementa od 0 do 1. Generalno, ovaj format snimanja se uglavnom koristi za postavljanje prozirne boje, a ne potpuno transparentne. Da biste postigli potpunu transparentnost, samo trebate napisati 0 kao četvrtu vrijednost.

Pozadina: rgba(0, 0, 0, 0);

U ovom slučaju, preostale 3 znamenke ne igraju posebnu ulogu.

Prozirna boja se može postaviti ako je četvrti parametar postavljen na vrijednost od 0,01 do 0,99. Već sam malo pisao o postavljanju translucencije za pozadinu u , možete pročitati ako vas zanima.

Metoda 3 - neprozirnost

Još jedno svojstvo iz css3 tehnologije. Ali želim da vas odmah upozorim da radi malo drugačije. Sa neprozirnošću, transparentnost se postavlja na cijeli blok na koji se primjenjuje. Tako se čitljivost teksta i percepcija slika pogoršavaju. Tako da vidim smisao korištenja ovog svojstva samo za blokove koji ne sadrže tekst ili bilo koju drugu informaciju. Vrijednosti se mogu podesiti od 0 do 1, kao što je slučaj sa četvrtim parametrom kada se specificira boja u rgba formatu.

Uopšteno govoreći, trenutno su to svi načini za postavljanje transparentne boje u CSS-u. Zašto je to potrebno je drugo pitanje. Kroz providnu pozadinu vidi se ono što je ispod. Ponekad je to potrebno uraditi na ovaj način dizajnom. Općenito, tehnika translucencije je danas vrlo uobičajena.

Transparentna pozadina

Kao što možda znate, pozadina je CSS svojstvo koje vam omogućava da postavite boju pozadine ili učitate sliku koja će djelovati kao pozadina.

Postavite transparentnost za css pozadinu

Dakle, sve se to radi vrlo jednostavno zahvaljujući formatu za snimanje u boji kao što je rgba. Ako radite sa grafičkim uređivačima, onda vjerovatno znate da rgb režim boja označava: udio crvene (crvene), proporcije zelene (zelene) i plave (plave). Dakle, rgba je praktično isti, samo se dodaje još jedan parametar - transparentnost. Napisano je ovako:

Boja pozadine: rgba (173, 57, 22, 0.5)

Prvo izričito naznačavamo da boju postavljamo u rgba modu. Zatim označavamo vrijednosti zasićenosti tri osnovne boje od 0 do 255, gdje je 255 najveća zasićenost. Četvrti parametar je naša transparentnost. Ovdje je upisana vrijednost od 0 do jedan. 1 je potpuno neproziran element, a 0 je potpuno transparentan element. U skladu s tim, ako ga postavite na 0, boja pozadine uopće neće biti vidljiva.

Sada znate kako postaviti svojstvo pozadine na transparentnost u CSS-u. Da biste to uradili, morate koristiti rgba režim boja. Postoji i svojstvo neprozirnosti, ali se primjenjuje na cijeli element u cjelini. To jest, kada se primjenjuje neprozirnost, transparentnost se može primijeniti na tekst, čineći ga nečitljivim.

Primjer transparentne pozadine

Prednosti prozirne pozadine lako je pokazati na primjeru. Na primjer, imamo opću pozadinu stranice. Ovako bi blok izgledao da mu je data puna crna boja:

Sada postavimo istu crnu boju za blok, ali je odredimo koristeći rgba format boje, specificirajući posljednju vrijednost kao 0,7, na primjer. Ispast će ovako:

Sada je pozadina bloka vidljiva kroz njega, a pozadinska slika je vidljiva kroz njega. Ova slika i pozadina su samo za primjer. Kao što možete zamisliti, u css-u transparentnost pozadine može biti korisna kada želite da se pozadina ugniježđenog elementa vidi bez zaklanjanja drugih pozadina koje se nalaze na drugim slojevima.

Postavljanje same boje pomoću rgba nije teško. Kao što je već spomenuto, prva tri slova označavaju tri osnovne boje: crvenu, zelenu i plavu, odnosno njihov udio (od 0 do 255). Postavljanjem različitih vrijednosti možete dobiti milione različitih boja, a prozirnost će vam omogućiti da dođete do mnogo ljepših efekata za stranicu, ako je potrebno.