S pojavom CSS3, rad dizajnera izgleda na mnogo je načina postao jednostavniji i logičniji: nakon svega, sada možete uistinu fleksibilno konfigurirati bilo koji objekt, sve rjeđe pribjegavajući JavaScriptu. Recimo da trebate prilagoditi prozirnost pozadine - CSS odmah nudi nekoliko opcija.

Pozadina je specificirana skupom atributa, background-repeat, background-attachment, background-origin, background-clip, background-color), a svaki od njih može se specificirati zasebno ili kombinirati pod atributom background. Pogledajmo svaki od njih detaljnije.

atribut boje pozadine

Čak i IE8 podržava ovu metodu. Više slika kao pozadine koristi se kada gumeni raspored. Glavna stvar je da kada koristite bilo koju sliku, ne zaboravite također navesti CSS boja pozadini, jer korisnici možda jednostavno neće učitati sliku.

atribut položaja pozadine

Ako koristite sliku za postavljanje pozadine bloka, CSS će vam omogućiti da postavite sliku bilo gdje na zaslonu. Prema zadanim postavkama, slika se nalazi na lijevoj strani gornji kut. Atribut prihvaća ili verbalne oznake (gore, dolje, lijevo, desno) ili numeričke (postoci, pikseli i druge mjerne jedinice). U ovom slučaju morate navesti dvije vrijednosti: vodoravno i okomito:

body (background-position: right center;) - u ovom primjeru pozadina će se nalaziti na desnoj strani stranice, a udaljenosti od dna i vrha do slike su iste.

atribut veličine pozadine

Ponekad je potrebno sa koristeći CSS rastegnuti pozadinu ili smanjiti njezinu veličinu. Da biste to učinili, upotrijebite atribut veličine pozadine, a veličina pozadine može se postaviti u pikselima ili postocima ili u bilo kojoj drugoj mjernoj jedinici.

Postoje neki problemi s ovim atributom: da bi se pozadina ispravno prikazala u ranijim verzijama preglednika, moraju se koristiti prefiksi. Sigurno, trenutne verzije u potpunosti podržavaju ovaj atribut i potreba za određenim svojstvima je nestala.

background-attachment atribut

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

• fiksni— čini sliku nepomičnom u odnosu na pozadinu;
• svitak— pozadina se pomiče zajedno s drugim elementima;
• lokalni— pozadinska slika se pomiče ako sadržaj ima pomicanje. Pozadina koja se proteže izvan sadržaja je fiksna.

Primjer upotrebe:

tijelo (pozadina-prilog fiksan).

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

atribut podrijetla pozadine

Ovaj atribut je odgovoran za pozicioniranje elementa. Rani preglednici zahtijevaju prefikse. Sama nekretnina ima tri parametra:

• padding-box postavlja pozadinu u odnosu na rub, uzimajući u obzir debljinu okvira;
• rubni okvir razlikuje se od prethodnog svojstva po tome što granična linija može potpuno ili djelomično preklapati pozadinu;
• kutija sa sadržajem Pozicionira sliku, povezujući je sa sadržajem.

Ako je navedeno više vrijednosti, preglednici mogu reagirati drugačije: Firefox i Opera prihvaćaju samo prvu opciju.

atribut ponavljanja pozadine

U pravilu, ako je pozadina dana slikom, treba je ponoviti vodoravno ili okomito. Za to se koristi atribut ponavljanja u pozadini. Dakle, pozadina bloka čiji CSS sadrži takvo svojstvo može imati jedan od nekoliko parametara:

• nema-ponoviti— slika se pojavljuje na stranici u jednoj verziji;
• ponoviti— pozadina se ponavlja duž x i y osi;
• ponovi-x- samo vodoravno;
• ponoviti- samo okomito;
• prostor— pozadina se ponavlja, ali ako se prostor ne može popuniti, tada se između slika pojavljuju praznine;
• krug— slika se skalira ako nije moguće ispuniti cijelo područje cijelim slikama.

Primjer upotrebe atributa:

tijelo (pozadinsko ponavljanje: ponavljanje bez ponavljanja)- sličan pozadinsko ponavljanje: ponavljanje-y.

U CSS3 je moguće postaviti vrijednosti za više slika ako navedete parametre odvojene zarezima.

atribut pozadinskog isječka

Ovaj atribut definira ponašanje pozadine ispod obruba (na primjer, u slučaju točkastih obruba):

• padding-box— pozadina se prikazuje strogo unutar bloka;
• rubni okvir- slika odgovara okviru;
• kutija sa sadržajem— slika u pozadini pojavljuje se samo unutar sadržaja.

Primjer upotrebe:

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

Chrom i Safari zahtijevaju prefiks -webkit-.

Atributi neprozirnosti i filtra

Atribut neprozirnosti omogućuje postavljanje prozirnosti pozadine - svojstvo CSS radit će u svim preglednicima. Vrijednost se može postaviti od 0,0 do uključivo 1,0. Ovime možete postaviti prozirnost CSS pozadina bez cjelobrojne vrijednosti: umjesto 0.3 dovoljno je napisati.3:

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

Za postavljanje prozirnosti pozadine, čiji će CSS raditi čak i za IE ispod verzije 9, koristite atribut filtera:

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

U ovom slučaju, vrijednost neprozirnosti postavljena je u rasponu od 0 do 100. Imajte na umu da se atribut neprozirnosti razlikuje od postavljanja prozirnosti pomoću RGBA nasljeđem: kada koristite neprozirnost, ne samo da pozadina postaje prozirna, već i svi elementi unutar bloka .

Uvijek pratite statistiku korištenja preglednika za CIS i sve ostale zemlje. Najveći problem za sve web dizajnere su stare verzije IE-a, one ne dopuštaju potpunu upotrebu CSS3. Prilikom kodiranja ne zaboravite koristiti posebne usluge koje provjeravaju podržava li vaš preglednik CSS svojstva. Ako ne možete instalirati starije verzije preglednika, pronađite servis koji će provjeriti rad stranice različitim preglednicima na liniji.

Glavna stvar je odrediti sliku na računalu ili telefonu, a zatim kliknuti OK na dnu ove stranice. Zadano obična pozadina Slike su zamijenjene prozirnim. Boja pozadine izvorne slike određuje se automatski, samo trebate odrediti u postavkama kojom bojom ćete je zamijeniti. Glavni parametar koji utječe na kvalitetu zamjene je “Intenzitet zamjene” i može biti različit za svaku sliku.

Primjer fotografije ružičaste ruže bez promjena i nakon zamjene obične pozadine prozirnom, bijelom i zelenom:

Prvi primjer s cvijetom ruže na prozirnoj pozadini napravljen sa sljedećim postavkama:
1) Intenzitet zamjene - 38;
2) Zaglađivanje rubova - 5;
3) Zamijenite običnu pozadinu prozirnom;
4) Podrezivanje (<0) или Добавление (>0) na rubovima - "-70";
5) Invert - onemogućeno (nije označeno).

Za stvaranje drugi primjer, s bijelom pozadinom, korištene su iste postavke kao u prvom primjeru, osim parametra: "Zamijeni običnu pozadinu s" - bijelom. U treći primjer, sa zelenom pozadinom, također se koriste postavke kao u prvom primjeru, osim parametra: "boja u hex formatu" - #245a2d.

Izvorna slika se ne mijenja ni na koji način. Dobit ćete drugu obrađenu sliku s prozirnom ili određenom pozadinom.

1) Navedite sliku u BMP format, GIF, JPEG, PNG, TIFF:

2) Postavke za zamjenu čvrste pozadine
Intenzitet zamjene: (1-100)

Izglađivanje rubova: (0-100) Zamijenite običnu pozadinu s: prozirnom (samo PNG-24) crvenom ružičastom ljubičastom plavom tirkiznom nebesko limeta zelenom žutom narančastom crnom sivom bijelom ili bojom u heksadecimalnom formatu: otvorite Crop paletu (<0) или Добавление (>0) na rubovima: (od -100 do 100)
(Intenzitet za dodatno obrezivanje ili dodavanje piksela oko odabranog područja na prozirnoj pozadini) Obrnuti odabir (zamijeni prednji plan umjesto pozadine)

U ovoj lekciji ćemo pogledati takve CSS Svojstva - neprozirnost I RGBA. Vlasništvo Neprozirnost odgovoran je samo za prozirnost elemenata i funkciju RGBA– za boju i prozirnost, ako navedete vrijednost prozirnosti alfa kanala.

CSS transparentnost Neprozirnost

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

Snimka zaslona jasno pokazuje da je crni tekst postao proziran poput plave pozadine.

Div (
pozadina: url(slike/vašaslika.jpg); /* Pozadinska slika */
širina: 750px;
visina: 100px;
margina: auto;
}
.plava (
pozadina: #027av4; /* Boja poda prozirna pozadina */
neprozirnost: 0,3; /* Vrijednost prozirnosti pozadine */
visina: 70px;
}
h1 (
ispuna: 6px;
obitelj-fontova: Arial Black;
font-weight: bolder;
veličina fonta: 50px;
}

CSS transparentnost u RGBA formatu

Format za snimanje boja RGBA, je više moderna alternativa za imovinu neprozirnost. R (crveno), G (zeleno), B (plavo)- znači: crveno, zeleno, plavo. Zadnje pismo A– znači alfa kanal, koji postavlja transparentnost. RGBA Za razliku od Neprozirnost ne utječe na podređene elemente.

Sada pogledajmo naš primjer pomoću RGBA. Zamijenimo ove retke u stilovima.

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

do sljedećeg retka

Pozadina: rgba(2, 127, 212, 0,3);

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

Rezultat primjera RGBA:

Druga snimka zaslona izgleda puno bolje od prve.

Igrajući se s prozirnošću pozadine blokova, možete postići zanimljive efekte na svojoj web stranici. Važno je da ovi prozirni blokovi idu na vrh šarenog dizajna, poput fotografije. Samo u ovom slučaju učinak ć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 zahtijeva da izgled izgleda dobro u starijim verzijama preglednika Internet Explorer , zatim dodajte svojstvo filtar i ne zaboravite komentirati kako to ne bi utjecalo na valjanost koda.

Zaključak

Format RGBA svi podržavaju moderni preglednici, uz iznimku Internet Explorer. Također je vrlo važno da RGBA fleksibilan, djeluje samo na određeni određeni element, bez utjecaja na njegovu djecu. Jasno je da je to prikladnije za dizajnera izgleda. Moj izbor je definitivno u korist formata RGBA za dobivanje transparentnost u CSS-u.

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

Stvaranje prozirne pozadine u HTML-u i CSS-u (neprozirnost i RGBA efekti)

Proziran učinak jasno vidljiv na pozadinskoj slici i postao je raširen u različitim operativni sustavi jer izgleda elegantno i lijepo. Glavna stvar je da ispod prozirnih blokova nema monokromatskog uzorka, već slike; u ovom slučaju prozirnost postaje vidljiva.

Ovaj učinak se postiže različiti putevi, uključujući staromodne tehnike kao što je korištenje PNG slike kao pozadine, stvaranje kockaste slike i svojstvo neprozirnosti. Ali čim se pojavi potreba da se napravi prozirna pozadina u bloku, ove metode imaju neugodne nedostatke.

Pogledajmo prozirnost teksta i pozadine - kako to ispravno koristiti u dizajnu web stranice:

Glavna značajka ovog svojstva je da vrijednost prozirnosti utječe na sve podređene elemente unutar njega, a ne samo na pozadinu. To znači da će i pozadina i tekst postati prozirni. Razinu prozirnosti možete povećati promjenom naredbe neprozirnosti s 0,1 na 1.

HTML 5 CSS 3 IE 9

U web dizajnu također se koristi djelomična transparentnost koja se postiže kroz RGBA format boja koji je postavljen 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 nije prikladno jer će tekst unutar elementa također biti djelomično proziran. Najbolje je koristiti RGBA format koji u svom sastavu ima alfa kanal, odnosno vrijednost transparentnosti. Vrijednost je napisana rgba, zatim su vrijednosti komponente crvene, plave i zelene boje navedene u zagradama, odvojene zarezima. Zadnja je prozirnost, koja je postavljena od 0 do 1, pri čemu 0 znači punu prozirnost, a 1 neprozirnost boje - sintaksa za korištenje rgba.

Prozirna pozadina HTML 5 CSS 3 IE 9

Neprozirnost pozadine postavljena je na 90% - poluprozirna pozadina i neproziran tekst.

Vlad Merzhevich

Djelomična transparentnost, kada se pravilno koristi, izgleda vrlo impresivno u dizajnu web stranice. Glavna stvar je da se ispod prozirnih blokova ne nalazi monokromatski dizajn, već slika; u ovom slučaju transparentnost postaje vidljiva. Ovaj efekt se postiže na mnogo načina, a ako se sjećate svih, uključujući staromodne metode, to je korištenje PNG slike kao pozadine, stvaranje kockaste slike i svojstvo neprozirnosti. Ali čim se pojavi potreba da se napravi prozirna pozadina u bloku, ove metode imaju neugodnu lošu stranu. Napravit ću kratku recenziju kako bi bilo jasno o čemu govorimo, kao i za one čitatelje koji nisu upoznati s netradicionalnim opcijama za stvaranje prozirnog efekta.

PNG kao pozadinu

U grafički urednik Jednobojni proziran uzorak unaprijed je pripremljen i spremljen u formatu PNG-24 (slika 1). Posebnost ovog formata je da podržava 256 razina transparentnosti, odnosno može prikazati prozirne slike.

Riža. 1. Slika za stvaranje 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.

Riža. 2. Primjena pozadinske slike

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

Gore navedena metoda ima niz ograničenja. Dakle, kada onemogućite slike u pregledniku, pozadina će potpuno nestati. Osim toga, nije lako promijeniti boju pozadine i vrijednost prozirnosti; da biste to učinili, morat ćete ponovno urediti sliku.

Karirana slika

Ova metoda odnosi se na potpuno stare metode implementacije translucencije, kada preglednici "nisu mogli učiniti ništa" i bilo je potrebno tražiti nestandardna rješenja. Trik je stvoriti sliku na kojoj se izmjenjuju prozirni i neprozirni pikseli (slika 3). Ova pravilna struktura stvara efekt prozirnosti, u biti ga oponaša.

Riža. 3. Uvećani karirani uzorak

Ovako to na kraju izgleda (slika 4).

Riža. 4. Simulirajte prozirnost

Nedostaci ove metode usporedivi su s prethodnom; također se može pojaviti moiré uzorak i tekst će se pokvariti.

Svojstvo neprozirnosti

Svojstvo neprozirnosti CSS 3 određuje vrijednost neprozirnosti i kreće se od 0 do 1, gdje je nula potpuna prozirnost elementa, a jedan je, naprotiv, neproziran. Svojstvo neprozirnosti ima posebnu značajku - prozirnost se odnosi na sve podređene elemente i oni ne mogu premašiti vrijednost neprozirnosti svog roditelja. Ispada 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. 5.

Riža. 5. Prozirnost teksta i pozadine

U verzijama Internet Explorera do i uključujući 8.0, neprozirnost ne radi, pa koristi svojstvo filtra specifično za preglednik. Naravno, to rezultira nevažećim CSS kodom.

RGBA

Moderni pristup mnogo je jednostavniji i vizualniji od gore navedenih metoda i sastoji se od korištenja RGBA formata za boje i pozadinu. Prva tri slova poznata su mnogima i označavaju crvenu, zelenu, plavu (crvena, zelena, plava), posljednja simbolizira alfa kanal i postavlja prozirnost elementa. Format snimanja je sljedeći.

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

U zagradama, umjesto slova, nalazi se vrijednost komponente boje; može se vidjeti u bilo kojem grafičkom uređivaču; posljednja vrijednost postavlja prozirnost i podudara se s vrijednošću svojstva neprozirnosti.

Ne podržavaju svi preglednici ovaj format: Internet Explorer od verzije 9, Opera od verzije 10, Firefox od 3, Safari od 3.2. Ali općenito, moderni preglednici ispravno prikazuju transparentnost. Za starije verzije IE-a možete zasebno odrediti boju u uobičajenom formatu i, naravno, neće biti prozirnosti. Ili ponovno upotrijebite svojstvo filtera, ali tada ćete se morati pomiriti s činjenicom da će transparentnost također utjecati na tekst (primjer 3). Za održavanje važećeg CSS koda koristio sam uvjetne komentare.

Primjer 3: Korištenje RGBA

HTML5 CSS3 IE Cr Op Sa Fx

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

Riža. 6. Prozirna pozadina s neprozirnim tekstom

Usporedite sliku s prethodnom, slova su postala svjetlija i jasnija.

U Internet preglednik Explorer 7 otkrio je grešku pri kombiniranju boje pozadine s različitim vrijednostima. Na primjer, ako boju pozadine postavite na crvenu, kao što je prikazano u nastavku, 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 s background.

Div ( background: red; /* I ovo radi */ background: rgba(255, 0, 0, 0.5); ) Međutim, postoji jedno upozorenje. Validator CSS-a žali se 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 preglednika i valjanosti.