Dobar dan, štreberi web razvoja, kao i njeni početnici. Za one koji ne prate trendove u IT polju, odnosno web modi, želim svečano obavijestiti da je ova publikacija na temu: "Kako napraviti transparentan blok pomoću css alata" upravo pravi put za vas. Zaista, u tekućoj 2016. godini, uvođenje različitih transparentnih objekata u online usluge smatra se stilskim potezom.
Stoga ću vam u ovom članku reći o svim postojećim metodama stvaranja transparentnosti, počevši od pretpotopnih rješenja, fokusirat ću se na kompatibilnost rješenja s pretraživačima, a također ću dati konkretne primjere programskog koda. Sada na posao!
Metoda 1. Pretpotopna
Kada su računari još bili slabi i "sposobnosti" nisu bile razvijene, programeri su smislili svoj način stvaranja prozirne pozadine: koristeći prozirne piksele naizmjence sa obojenim. Tako je kreirani blok izgledao kao šahovnica kada je skaliran, ali je u svojoj normalnoj veličini izgledao kao neka vrsta prozirnosti.
Ovo, po mom mišljenju, "štaka" naravno pomaže u starim verzijama pretraživača, u kojima moderna rješenja ne funkcionišu. Ali vrijedi napomenuti da je kvalitet prikaza teksta , upisan u takve, naglo pada.
Metod 2. Nije zbunjen
U rijetkim slučajevima programeri rješavaju problem sa uvođenjem poluprozirne slike umetanjem ... gotove poluprozirne slike! Za to se koriste slike sačuvane u PNG-24 formatu. Ovaj grafički format vam omogućava da postavite 256 nivoa translucencije.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
Međutim, ova metoda nije prikladna iz nekoliko razloga:
- Internet Explorer 6 ne radi sa ovom tehnologijom, za nju morate napisati skriptni kod;
- Ne možete promijeniti boje pozadine u css-u;
- Ako je funkcija prikazivanja slika onemogućena u pretraživaču, ona će nestati.
Metod 3. Vlasnički
Najčešći i najpoznatiji način da se blok učini transparentnim je svojstvo neprozirnost.
Vrijednost parametra varira u rasponu, gdje je na 0 objekt nevidljiv, a na 1 se prikazuje u potpunosti. Međutim, i tu ima nekih neprijatnih momenata.
Prvo, sva djeca nasljeđuju transparentnost. To znači da će i upisani tekst "prosijati" zajedno sa pozadinom.
Drugo, Internet Explorer opet "vrće nos" i do verzije 8 ne radi neprozirnost.
Da biste riješili ovaj problem, koristite filter:alfa (Prozirnost = vrijednost).
Pogledajmo primjer.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
Metoda 4. Moderna
Danas profesionalci koriste rgba (r, g, b, a) alat.
Prije toga sam rekao da je RGB jedan od popularnih modela boja, gdje je R odgovoran za sve nijanse crvene, G - nijanse zelene i B - nijanse plave.
U slučaju css parametra, varijabla A je odgovorna za alfa kanal, koji je zauzvrat odgovoran za transparentnost.
Glavna prednost potonje metode je da alfa kanal ne utječe na objekte unutar stiliziranog bloka.
rgba (r, g, b, a) je podržan jer:
- 10 verzija Opera;
- Internet Explorer 9;
- Safari 3.2;
- 3 verzije Firefoxa.
Želeo bih da istaknem jednu zanimljivost! Omiljeni Internet Explorer 7 daje grešku prilikom kombinovanja svojstva boja pozadine sa nazivom boja (boja pozadine: zlatna). Stoga vrijedi koristiti samo:
boja pozadine: rgba (255, 215, 0, 0.15)
Sada za primjer.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
U našoj radnji ćete naći sve vrste cveća.
|
Imajte na umu da je tekstualni sadržaj bloka u potpunosti vidljiv (100% crn), dok je pozadina postavljena na alfa kanal od 0,88, tj. 88%.
Ovim se završava publikacija. Pretplatite se na moj blog i ne zaboravite pozvati prijatelje. Sretno u učenju web jezika! Ćao ćao!
Opis
Određuje boju pozadine elementa. Iako ovo svojstvo ne nasljeđuje svojstva od svog roditelja, jer je početna vrijednost postavljena na transparentno, boja pozadine djece je ista kao i boja pozadine roditelja.
Sintaksa
boja pozadine:<цвет>| transparentan | nasljediti
Vrijednosti
transparent Postavlja pozadinu na transparentnu. inherit Nasljeđuje vrijednost od roditelja.HTML5 CSS2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ovaj primjer koristi tri različita načina za postavljanje boje pozadine za elemente na web stranici. Rezultat primjera prikazan je na sl. 1.
Rice. 1. Primjena boje pozadine
Objektni model
document.getElementById ("elementID") .style.backgroundColor
Pregledači
Internet Explorer do i uključujući verziju 7.0 ne podržava naslijeđenu vrijednost.
Ne postoji direktan način za postavljanje transparentnosti pozadinske slike (barem za 2016.) preko CSS-a (uključujući CSS 3). Postoji mnogo rješenja za ovaj problem.
Miješanje pozadina
Najjednostavnije rješenje je pomiješati dvije pozadine (sliku i poluprozirnu boju). Ova metoda je prikladna ako postoji ista vrsta pozadine ispod "prozirne pozadinske slike". ovo uopšte nije transparentnost, već njena imitacija mešanjem slike sa bojom. Postavite dvostruku pozadinu koja se sastoji od pozadinske slike i željene boje s alfa kanalom. Nakon toga odaberite najprikladniji način miješanja i koristite alfa kanal boje da prilagodite kompoziciju željenom rezultatu.
Pozadina: url ("/ images / img1.jpg"), rgba (255,255,255,0.9); background-blend-mode: boja;
Dodavanje pseudo elementa
Najbolji način da postignete ono što želite. Kreirajte pseudo-element koristeći after pseudo-klasu. Tu je
#main (pozicija: relativna;) #main: poslije (sadržaj: ""; prikaz: blok; pozicija: apsolutna; vrh: 0; lijevo: 0; background-image: url (/ wp-content / uploads / 2010/11 /tandem.jpg); širina: 100%; visina: 100%; neprozirnost: 0,2; z-indeks: -1;)
Zdravo svima. Kao što verovatno znate, pozadina je css svojstvo koje vam omogućava da postavite boju pozadine ili učitate sliku koja će delovati kao pozadina. CSS3 takođe uvodi mogućnost kreiranja linearnih i radijalnih gradijenata, ali to je tema za poseban članak. U ovome sam vam također htio reći kako postaviti transparentnost za svojstvo pozadine u css-u.
Postavite transparentnost za css pozadinu
Dakle, sve je ovo vrlo jednostavno zahvaljujući rgba formatu za označavanje boja. Ako radite sa grafičkim uređivačima, vjerovatno znate da rgb režim boja označava crvenu, zelenu i plavu. 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 ukazujemo da postavljamo boju u rgba modu. Zatim specificiramo vrijednosti zasićenosti tri primarne 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, a 0 je potpuno providan. U skladu s tim, ako ga postavite na 0, boja pozadine uopće neće biti vidljiva.
Sada znate kako postaviti transparentnost za svojstvo pozadine u css-u. Da biste to učinili, trebate koristiti rgba način boje. Postoji i svojstvo neprozirnosti, ali se primjenjuje na cijeli element u cjelini. To jest, kada se primeni neprozirnost, transparentnost se takođe može primeniti na tekst, čineći ga nečitljivim.
Prozirna pozadina na primjer
Prednosti prozirne pozadine lako je pokazati na primjeru. Na primjer, imamo opću pozadinu za stranicu. Ovako bi blok izgledao da mu je data puna crna boja:
Sada postavimo istu crnu boju za blok, ali je označimo koristeći rgba format boje, specificirajući posljednju vrijednost u 0.7, na primjer. Ispada ovako:
Sada je pozadina bloka vidljiva kroz nju i kroz nju možete vidjeti pozadinsku sliku. Ova slika i pozadina služe samo u svrhu ilustracije. Kao što možete zamisliti, transparentnost u css pozadini može biti korisna kada vam je potrebna pozadina ugniježđenog elementa da se vidi kroz nju bez zaklanjanja drugih pozadina koje se nalaze u drugim slojevima.
Nije teško podesiti samu boju koristeći rgba. Kao što je već spomenuto - prva tri slova označavaju tri osnovne boje: crvenu, zelenu i plavu, odnosno njihov udio (od 0 do 255). Propisivanjem različitih vrijednosti možete dobiti milione različitih boja, a prozirnost će vam omogućiti da smislite mnogo lijepih efekata za stranicu, ako je potrebno.
Svojstvo neprozirnosti se koristi za stvaranje efekta transparentnosti u CSS-u.
IE8 i raniji pretraživači podržavaju alternativno svojstvo - filter: alfa (prozirnost = x), gdje "x" može imati vrijednost od 0 do 100, što je niža vrijednost, to će element biti transparentniji.
Svi ostali pretraživači podržavaju standardno CSS svojstvo neprozirnosti, koje može uzeti kao vrijednost brojeve od 0,0 do 1,0, što je niža vrijednost, to će element biti transparentniji:
Pokušajte "Transparentnost lebdenja
Pseudo-klasa: hover vam omogućava da promijenite izgled elemenata kada pređete mišem preko njih. Iskoristićemo ovu priliku da učinimo da slika izgubi svoju transparentnost pri lebdenju mišem:
Pokušajte "Transparentnost pozadine
Postoje dva moguća načina da se element učini transparentnim: gore opisano svojstvo neprozirnosti i navođenje boje pozadine u RGBA formatu.
Možda ste već upoznati sa RGB modelom predstavljanja boja. RGB (Red, Green, Blue - crvena, zelena, plava) - sistem boja koji određuje nijansu miješanjem crvene, zelene i plave boje. Na primjer, možete koristiti bilo koju od sljedećih deklaracija da boju teksta postavite na žutu:
Boja: rgb (255,255,0); boja: rgb (100%, 100%, 0);
Boje navedene sa RGB razlikovat će se od heksadecimalnih vrijednosti koje smo ranije koristili po tome što omogućavaju alfa kanal transparentnosti. To znači da će pozadina elementa sa alfa prozirnošću pokazati šta je ispod.
Deklaracija RGBA boje je po sintaksi slična standardnim RGB pravilima. Međutim, između ostalog, trebamo deklarirati vrijednost kao RGBA (umjesto RGB) i postaviti dodatnu decimalnu vrijednost prozirnosti nakon vrijednosti boje u rasponu od 0,0 (puna prozirnost) do 1 (puna neprozirnost).
Boja: rgba (255,255,0,0.5); boja: rgba (100%, 100%, 0.0.5);
Razlika između svojstva neprozirnosti i RGBA je u tome što svojstvo neprozirnosti primjenjuje transparentnost na cijeli element, odnosno cijeli sadržaj elementa postaje transparentan. A RGBA vam omogućava da postavite transparentnost pojedinačnih dijelova elementa (na primjer, samo teksta ili pozadine):
Tijelo (slika pozadine: url (img.jpg);) .prim1 (širina: 400px; margina: 30px 50px; boja pozadine: #ffffff; granica: 1px puna crna; težina fonta: bold; neprozirnost: 0,5; filter : alpha (prozirnost = 70); / * za IE8 i ranije * / text-align: center;) .prim2 (širina: 400px; margina: 30px 50px; boja pozadine: rgba (255,255,255,0.5); granica: 1px čvrsta crna; težina fonta: bold; poravnanje teksta: centar;) Isprobajte "
Napomena: RGBA vrijednosti nisu podržane u IE8 i ranijim verzijama. Da biste proglasili rezervnu boju za starije pretraživače koji ne podržavaju alfa vrijednosti boja, navedite je prvo prije RGBA vrijednosti: background: rgb (255,255,0); pozadina: rgba (255,255,0,0.5);
