Kako postaviti prozirnu boju u css? Trenutno postoje 3 načina za to.

Metoda 1 - transparentna vrijednost

Ako vrijednost teksta ili boje pozadine postavite na transparentnu, tada će boja biti potpuno prozirna, odnosno nevidljiva. Primjer:

Boja: prozirna;

Takav tekst neće biti vidljiv na stranici.

Metoda 2 - rgba način boje

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

Pozadina: rgb (230, 121, 156);

Format rgba se ne razlikuje, dodaje se samo četvrta vrijednost - stupanj prozirnosti elementa od 0 do 1. Općenito, ovaj format zapisa uglavnom se koristi za određivanje poluprozirne boje, a ne potpuno prozirne. Za postizanje puna 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.

Poluprozirna boja može se postaviti ako je četvrti parametar postavljen na vrijednost od 0,01 do 0,99. Već sam malo napisao o postavljanju prozirnosti pozadine, možete pročitati ako vas zanima.

Metoda 3 - neprozirnost

Još jedno svojstvo iz css3 tehnologije. Ali odmah vas želim upozoriti da radi malo drugačije. Neprozirnost se koristi za postavljanje neprozirnosti na cijeli blok na koji se primjenjuje. Tako se čitljivost teksta i percepcija slika pogoršavaju. Dakle, vidim smisao primjene svojstva samo za blokove u kojima nema teksta ili bilo koje druge informacije. Vrijednosti se mogu postaviti od 0 do 1, kao što je slučaj s četvrtim parametrom pri određivanju boje u rgba formatu.

Općenito, na ovaj trenutak ovo su svi načini koje znam za postavljanje transparentne boje u css-u. Zašto je to potrebno drugo je pitanje. Preko prozirna pozadina vidi se ono što je ispod. Ponekad se to mora učiniti dizajnom. Općenito, tehnika s translucencijom danas je vrlo česta.

Prozirna pozadina

Kao što vjerojatno znate, pozadina je css svojstvo koje vam omogućuje da postavite boju pozadine ili učitate sliku koja će djelovati kao pozadina.

Postavite transparentnost za css pozadinu

Dakle, sve je to vrlo jednostavno zahvaljujući rgba formatu za označavanje boja. Ako radite sa grafički urednici onda to vjerojatno znaš način rada u boji rgb označava crvenu, zelenu i plavu. Dakle, rgba je praktički isti, samo se dodaje još jedan parametar - transparentnost. Napisano je ovako:

Boja pozadine: rgba (173, 57, 22, 0,5)

Prvo, izričito označavamo da boju postavljamo u rgba modu. Zatim specificiramo vrijednosti zasićenja 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 potpuno proziran. Sukladno tome, 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, morate koristiti rgba način boje. Ima li još svojstvo neprozirnosti ali se odnosi na cijeli element u cjelini. To jest, kada se primjenjuje neprozirnost, transparentnost se također može primijeniti na tekst, čineći ga nečitljivim.

Na primjer, prozirna pozadina

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

Sada postavimo istu crnu boju na blok, ali je označimo pomoću rgba formata boje, navodeći posljednju vrijednost u 0.7, na primjer. Ispada ovako:

Sada je pozadina bloka vidljiva i vidljiva kroz nju pozadinska slika... Ova slika i pozadina služe samo u svrhu ilustracije. Kao što možete zamisliti, u css pozadina prozirnost može biti korisna kada želite da se pozadina ugniježđenog elementa vidi bez zaklanjanja drugih pozadina na drugim slojevima.

Postavite samu boju sa koristeći rgba nije teško. Kao što je već spomenuto - prva tri slova znače tri osnovne boje: crvenu, zelenu i plavu, odnosno njihov udio (od 0 do 255). Propisivanje različita značenja možete dobiti milijune različite boje, a prozirnost će vam omogućiti da smislite puno više prekrasni efekti za stranicu, ako je potrebno.

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

CSS neprozirnost

Brojčana vrijednost za neprozirnost specificirano u rasponu od 0,0 do 1,0, gdje je nula puna prozirnost, a jedan, naprotiv, apsolutna neprozirnost. Na primjer, da biste vidjeli 50% transparentnosti, trebate postaviti vrijednost na 0,5. Mora se imati na umu da neprozirnost odnosi se na sve dječji elementi roditelj. To znači da će tekst na prozirnoj pozadini također biti proziran. A ovo je već jako značajan nedostatak, tekst se također ne ističe.

Na snimci zaslona možete jasno vidjeti da je crni tekst postao jednako proziran kao i plava pozadina.

Div (
pozadina: url (slike / yourimage.jpg); / * Pozadinska slika * /
širina: 750px;
visina: 100px;
margina: auto;
}
.plava (
pozadina: # 027av4; / * Poluprozirna boja pozadine * /
neprozirnost: 0,3; / * Vrijednost prozirnosti pozadine * /
visina: 70px;
}
h1 (
padding: 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 (crvena), G (zelena), B (plava)- znači: crvena, zelena, plava. Zadnje slovo A- znači alfa kanal, koji postavlja transparentnost. RGBA Za razliku od Neprozirnost ne utječe na djecu.

Pogledajmo sada naš primjer korištenja RGBA... Zamijenimo ove retke u stilovima.

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

na sljedeći jedan redak

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

Kao što možete vidjeti, vrijednost transparentnosti od 0,3 je ista za obje metode.

Rezultat primjera s RGBA:

Druga snimka zaslona izgleda puno bolje od prve.

Igrajući se s prozirnošću pozadine blokova, možete postići na web mjestu zanimljivi efekti... Važno je da ovi prozirni blokovi idu preko raznolikog dizajna kao što je fotografija. 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 podržavaju svi moderni preglednici osim Internet Explorer... Također je vrlo važno da RGBA fleksibilan, djeluje samo na određeno zadanog elementa bez utjecaja na djecu. Jasno je da je to prikladnije za dizajnera izgleda. Moj izbor očito ide u prilog formatu RGBA za dobivanje transparentnost u CSS-u.

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

Vlad Merzhevich

Učinak prozirnosti elementa jasno je vidljiv na pozadinskoj slici i postao je raširen u različitim operativni sustavi jer izgleda elegantno i lijepo. U web dizajnu, prozirnost se također primjenjuje i postiže kroz svojstvo neprozirnosti ili RGBA format boje koji je postavljen za pozadinu.

Gradijentni blok

Napravite blok prikazan na sl. 1. Blok sadrži poluprozirni okvir s gradijentom s pozadinom s gradijentom ispod naslova i malim pokazivačem. Pozadina na stranici prikazuje se samo radi jasnoće efekta prozirnosti, možete odrediti bilo koju svoju sliku. Minimalna visina bloka je 100px.

Kako napraviti sloj poluprozirnim?

Da biste promijenili neprozirnost elementa, koristite svojstvo stila neprozirnosti s vrijednošću od 0 do 1, gdje 0 odgovara punoj transparentnosti, a 1, naprotiv, neprozirnosti objekta. Ovo svojstvo ne radi u Internet Exploreru, pa morate koristiti filtar posebno za njega, svojstvo koje nije dio CSS specifikacije. Primjer 1 pokazuje kako postaviti transparentnost slojeva za sve preglednike.

Prozirna pozadina

Vlad Merzhevich

Djelomična transparentnost, kada se koristi ispravno, izgleda vrlo impresivno u dizajnu web stranice. Glavna stvar je da ispod prozirnih blokova ne postoji jednobojni uzorak, već slika, u ovom slučaju prozirnost postaje vidljiva. Ovaj učinak se postiže različiti putevi A ako se sjećate svega, uključujući i staromodne metode, onda to koristi PNG sliku kao pozadinu, stvaranje karirane slike i svojstva neprozirnosti. Ali čim postoji potreba za napraviti u bloku prozirna pozadina, ove metode imaju neugodan Druga strana... napraviti ću mali pregled da bude jasno što u pitanju, kao i za one čitatelje koji nisu upoznati s nekonvencionalnim opcijama za stvaranje prozirnog efekta.

Kako postaviti tablicu na poluprozirnu, a neke od ćelija nisu?

Za promjenu prozirnosti elementa u CSS3, osigurano je svojstvo neprozirnosti, njegova vrijednost može varirati od 0 do 1. Nula odgovara punoj transparentnosti elementa, a jedan, naprotiv, neprozirnosti. Moderni preglednici rade sasvim ispravno s ovim svojstvom, s izuzetkom Internet preglednik Explorer, pa za njega morate koristiti posebno svojstvo filtera s alfa vrijednošću (Opacity = X), pri čemu X može varirati od 0 do 100.

Određuje razinu transparentnosti elementa web stranice. Uz djelomičnu ili potpunu prozirnost, element se pojavljuje pozadinska slika ili druge elemente ispod prozirnog objekta.

kratke informacije

Oznake

Vrijednosti

Vrijednost je broj iz raspona. Vrijednost 0 odgovara punoj transparentnosti elementa, 1, naprotiv, njegovoj neprozirnosti. Razlomci brojeva tip 0.6 postavlja prozirnost. Dozvoljeno je pisati brojeve bez početne nule, poput neprozirnosti: .6.

Peščanik

Winnie the Pooh uvijek nije bio nesklon malo osvježenja, pogotovo u jedanaest sati ujutro, jer je u to vrijeme doručak već odavno završio, a večera nije ni pomislila da počne. I, naravno, bio je užasno oduševljen kad je vidio Zeca kako vadi šalice i tanjure.

div (prozirnost: 1;)

Primjer

Proizlaziti ovaj primjer prikazano na sl. jedan.

Riža. 1. Rezultat korištenja neprozirnosti

Model objekta

Objekt.stil.prozirnost

Bilješka

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

Internet Explorer prije verzije 9.0 koristi filtere za promjenu prozirnosti, za ovaj preglednik trebate napisati filter: alpha (prozirnost = 50), gdje parametar neprozirnosti može imati vrijednost od 0 do 100.

Specifikacija

Svaka specifikacija prolazi kroz nekoliko faza odobrenja.

• Preporuka - Ovu specifikaciju je odobrio W3C i preporučuje se kao standard.
• Preporuka kandidata ( Moguća preporuka ) - skupina odgovorna za standard je zadovoljna da je u skladu s njegovim ciljevima, ali je za implementaciju standarda potrebna pomoć razvojne zajednice.
• Predložena preporuka ( Predložena preporuka) - U ovom trenutku dokument se podnosi Savjetodavnom vijeću W3C na konačno odobrenje.
• Radni nacrt – zrelija verzija nacrta nakon rasprave i amandmana za reviziju zajednice.
• Nacrt urednika ( Urednički nacrt) - nacrt standarda nakon uređivanja od strane urednika projekta.
• Nacrt ( Nacrt specifikacije) je prvi nacrt standarda.

/* 06.07.2006 */

CSS transparentnost (css neprozirnost, javascript neprozirnost)

Transparentnost je tema ovog članka. Ako vas zanima kako učiniti transparentnim elemente html stranice pomoću CSS-a ili Javascript-a, te kako postići višepreglednički rad (identičan rad u različitim preglednicima), dajte preglednici Firefox, Internet Explorer, Opera, Safari, Konqueror, onda nema na čemu. Osim toga, razmotrite gotovo rješenje postupno mijenjajući transparentnost koristeći javascript.

CSS neprozirnost

CSS simbioza neprozirnosti

Pod simbiozom mislim na ujedinjenje različitih stilova za različitim preglednicima u jednom CSS pravilo za dobivanje željeni učinak, tj. za implementaciju u više preglednika.

Filtar: progid: DXImageTransform.Microsoft.Alpha (prozirnost = 50); / * IE 5,5 + * / -moz-prozirnost: 0,5; / * Mozilla 1.6 i starije * / -khtml-prozirnost: 0,5; / * Konqueror 3.1, Safari 1.1 * // * CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 * /

Zapravo, potrebno je prvo i posljednje pravilo, za IE5.5+ i preglednike koji razumiju CSS3 neprozirnost, a dva pravila u sredini očito ne utiču na vrijeme, ali ne smetaju baš (odlučite sami trebate li ih).

Simbioza neprozirnosti Javascripta

Sada pokušajmo postaviti transparentnost kroz skriptu, uzimajući u obzir osobitosti različitih preglednika opisanih gore.

Funkcija setElementOpacity (sElemId, nOpacity) (var opacityProp = getOpacityProperty (); var elem = document.getElementById (sElemId); if (! Elem ||! OpacityProp) return; // Ako element sa navedenim ID-om ne postoji ili preglednik ne podržava nijednu od poznatih funkcija kontrole transparentnosti if (opacityProp == "filter") // Internet Exploder 5.5+ (nOpacity * = 100; // Ako je prozirnost već postavljena, promijenite je kroz zbirku filtera, u suprotnom dodajte transparentnost kroz style.filter var oAlpha = elem.filters ["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter + = "progid: DXImageTransform.Microsoft.Alpha (prozirnost =" + nOpacity + ")"; // Kako ne biste prebrisali druge filtre, koristite "+ =") drugo // Drugi preglednici elem.style = nNeprozirnost; ) funkcija getOpacityProperty () (if (typeof document.body.style.opacity == "string") // Sukladno s CSS3 (Moz 1.7+, Safari 1.2+, Opera 9) vratiti "prozirnost"; else if (typeof document.body.style.MozOpacity == "string") // Mozilla 1.6 i ranije, Firefox 0.8 vrati "MozOpacity"; else if (typeof document.body.style.KhtmlOpacity == "string") // Konqueror 3.1, Safari 1.1 vraćaju "KhtmlOpacity"; else if (document.body.filters && navigator.appVersion.match (/ MSIE ([\ d.] +); /)> = 5.5) // Internet Exploder 5.5+ vraća "filter"; vratiti false; // nema transparentnosti }

Funkcija uzima dva argumenta: sElemId - id elementa, nOpacity - broj s pomičnim zarezom od 0,0 do 1,0 koji specificira CSS3 neprozirnost.

Mislim da bi bilo vrijedno razjasniti dio funkcije setElementOpacity koji se odnosi na IE.

Var oAlpha = elem.filters ["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter + = "progid: DXImageTransform.Microsoft.Alpha (prozirnost =" + nOpacity + ")";

Možda se pitate zašto ne postavite transparentnost dodjeljivanjem (=) elem.style.filter = "..."; ? Zašto koristiti "+ =" za dodavanje svojstva filtra na kraj retka? Odgovor je jednostavan, kako ne bi "prebrisali" druge filtere. Ali u isto vrijeme, ako dodate filter na ovaj način drugi put, on se neće promijeniti ranije postavljene vrijednosti ovog filtra, ali će se jednostavno dodati na kraj retka svojstava, što nije točno. Stoga, ako je filtar već instaliran, morate njime manipulirati kroz zbirku filtara primijenjenih na element: elem.filters (ali imajte na umu, ako filtar još nije dodijeljen elementu, upravljajte njime kroz ovu zbirku nemoguće). Elementima zbirke može se pristupiti ili po nazivu filtra ili po indeksu. Međutim, filtar se može specificirati u dva stila, IE4 kratki stil ili IE5.5 + stil, što se uzima u obzir u kodu.

Glatka promjena prozirnosti elementa

Gotovo rješenje. Korištenje biblioteke opacity.js

fadeOpacity (ovaj.id, "oR1")"onmouseout =" fadeOpacity.back (this.id)"src =" / img / strawberry.jpg "širina =" 100 "visina =" 80 "/> fadeOpacity (ovaj.id, "oR1")"onmouseout =" fadeOpacity.back (this.id)"src =" / img / tomato.jpg "width =" 82 "height =" 100 "/> fadeOpacity (ovaj.id, "oR1")"onmouseout =" fadeOpacity.back (this.id)"src =" / img / sweet_cherry.jpg "width =" 98 "height =" 97 "/>

Osnovni koraci:

1. Povezujemo knjižnicu funkcija;
2. Metodom definiramo pravila fadeOpacity.addRule ();
3. Pozivanje metode fadeOpacity () za promjenu prozirnosti od početne vrijednosti do krajnje vrijednosti, ili fadeOpacity.back () vratiti se početna vrijednost razina transparentnosti.

Žvakati

Kako spojiti knjižnicu, mislim, može se vidjeti iz gornjeg primjera. Sada je vrijedno pojasniti definiciju pravila. Prije pozivanja metoda za glatku promjenu transparentnosti, morate definirati pravila po kojima će se proces izvršavati: trebate definirati početnu i konačnu transparentnost, a također, ako želite, navesti parametar kašnjenja koji utječe na brzinu prozirnosti proces promjene.

Pravila se definiraju pomoću metode fadeOpacity.addRule

Sintaksa: fadeOpacity.addRule (sRuleName, nStartOpacity, nFinishOpacity, nDalay)

Argumenti:

• sRuleName - naziv pravila, postavljen proizvoljno;
• nStartOpacity i nFinishOpacity - početna i završna transparentnost, brojevi u rasponu od 0,0 do 1,0;
• nDelay - odgoda u milisekundama (izborno, zadana vrijednost je 30).

Samo blijeđenje prozirnosti poziva se putem fadeOpacity (sElemId, sRuleName) metoda, gdje je sElemId id elementa, a sRuleName je naziv pravila. Da biste vratili transparentnost početno stanje koristi se metoda fadeOpacity.back (sElemId).

: zadržite pokazivač miša kako biste jednostavno promijenili prozirnost

Također napominjem da je za jednostavnu promjenu transparentnosti (ali ne i postupnu promjenu), pseudo-selektor sasvim ispravan : lebdjeti, što vam omogućuje da definirate stilove za element kada zadržite pokazivač iznad njega.

Imajte na umu da je slika smještena unutar elementa A. Činjenica je da Internet Explorer do verzije 6 razumije: pseudo-selektor, samo primjenjuje se na linkove, a ne na bilo koje elemente, kao što bi trebalo biti u CSS-u (u IE7 situacija je popravljena).

Transparentnost i nazubljeni tekst u IE

S Izdanje za Windows XP je uveo anti-aliasing fontove na ekranu metoda Cleartype a s time i nuspojave u IE-u pri korištenju ove metode anti-aliasinga. U našem slučaju, ako se transparentnost primjenjuje na element s tekstom kada je omogućena metoda ClearType anti-aliasing, tada se tekst prestaje normalno prikazivati ​​(podebljani tekst - podebljano, na primjer, dvojnici, mogu se pojaviti i razni artefakti, na primjer, u obliku redaka, nazubljenog teksta). Kako biste popravili situaciju, za IE morate postaviti boju pozadine, CSS svojstvo boja pozadine, element na koji se primjenjuje transparentnost. Srećom, IE7 je ispravio grešku.