Faceți un fundal CSS translucid. Transparență CSS Context. Fundal transparent sau text utilizând CSS. Atribute opacitatea și filtrul

Ziua bună, Geeks de dezvoltare web, precum și începătorii ei. Pentru cei care nu respectă tendințele regiunii IT sau mai degrabă pentru moda web, vreau să vă informez că această publicație pe subiect: "Cum să faceți transparent blocul CSS. Instrumente "Tu doar apropo. Într-adevăr, în actualul 2016, punerea în aplicare a diferitelor obiecte transparente în serviciile online este considerată elegantă.

Prin urmare, în acest articol, vă voi spune despre toate modalitățile existente de a crea transparență, variind de la soluțiile Doping, să accentueze compatibilitatea soluțiilor cu browserele și, de asemenea, să furnizeze exemple specifice ale codului programului. Acum pentru muncă!

Metoda 1. Actualizat

Când altceva era calculatoare slabe Și nu a dezvoltat "abilități", dezvoltatorii au venit cu modul lor de a crea un fundal transparent: folosind pixeli transparenți în rândul culorii. Astfel, blocul creat atunci când scalarea arăta ca o tablă de șah, dar în dimensiunea obișnuită seamănă cu o anumită transparență.

Aceasta, în opinia mea, "Cruptch", desigur, ajută la versiunile vechi ale browserelor, în care soluțiile moderne nu funcționează. Dar merită remarcat faptul că calitatea afișării textului , inscripționate într-o astfel de cădere bruscă.

Metoda 2. Nu este confuz

În cazuri rare, dezvoltatorii rezolvă problema cu introducerea unei imagini translucide prin inserare ... Imagini deja pregătite de translucide! Aceasta utilizează imagini stocate în format PNG-24. formatul grafic. Vă permite să setați 256 de niveluri de transluciditate.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Cu toate acestea, această metodă nu este convenabilă din mai multe motive:

1. Internet Explorer. 6 nu funcționează cu o astfel de tehnologie, este necesar să se scrie un cod de scripting pentru acesta;
2. Nu puteți modifica culorile fundalului în CSS;
3. Dacă funcția de afișare a imaginii este dezactivată în browser, acesta va dispărea.

Metoda 3. Proprion

Cea mai obișnuită și bine cunoscută modalitate de a face orice bloc transparent este proprietatea. opacitate.

Valoarea parametrului variază în intervalul, unde la 0 obiectul este invizibil și la 1 - este afișat complet. Cu toate acestea, există câteva momente neplăcute aici.

În primul rând, toate filialele moștenesc transparența. Și acest lucru înseamnă că textul inscripționat va "schimba" împreună cu fundalul.

În al doilea rând, Internet Explorer din nou "crește nasul" și până la 8 versiune nu funcționează cu opacitate.

Pentru a rezolva această problemă utilizată filtru:alpha (Opacitate \u003d valoare).

Luați în considerare un exemplu.

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. Modern.

Până în prezent, profesioniștii folosesc instrumentul RGBA (R, G, B, A).

Înainte de aceasta, am spus că RGB este unul dintre modelele de culoare populare, unde R este responsabil pentru toate nuanțele de roșu, G - nuanțele verzi și b - nuanțele albastre.

In caz de parametrul CSS. Variabila A este responsabilă pentru canalul alfa, care la rândul său este responsabil pentru transparență.

Principalul avantaj al ultimei metode - canalul alfa nu afectează obiectele din blocul stilizat.

rGBA (R, G, B, A) este menținută de la:

• 10 versiune a Operei;
• Internet Explorer 9;
• Safari 3.2;
• 3 versiuni ale Firefox.

Vreau să menționez un fapt interesant! Hot Favorit Internet Explorer 7 oferă o eroare la combinarea proprietății culoare de fundal. Cu numele culorilor (fundal-culoare: aur). Prin urmare, merită să utilizați numai:

culoare de fundal: RGBA (255, 215, 0, 0.15)

Și acum un exemplu.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

În magazinul nostru veți găsi tot felul de culori.

Rețineți că conținutul de text al blocului este complet vizibil (100% negru), în timp ce fundalul primește un canal alfa egal cu 0,88, adică 88%.

Pe această publicație sa apropiat de sfârșit. Abonați-vă la blogul meu și nu uitați să invitați prieteni. Doresc noroc în învățarea limbajelor web! Pa! Pa!

Pentru a crea un efect de transparență în CSS, se utilizează proprietatea opacității.

Browser IE8 și versiunile anterioare suportă o proprietate alternativă - filtru: Alpha (opacitate \u003d x), unde "x" poate avea o valoare de la 0 la 100, cu atât valoarea este mai mică, cu atât este mai transparent este elementul.

Toate celelalte browsere suport standard CSS proprietate Opacitate, care poate fi luată ca valoare a numărului de la 0,0 la 1,0, cu atât mai puțină valoare este mai transparentă este elementul:

Încerca

Transparență în hovering.

Pseudo-Class: Hover vă permite să schimbați aspect Elemente când deplasați cursorul mouse-ului. Vom profita de această posibilitate ca imaginea când plimbă mouse-ul își pierde transparența:

Încerca

Transparency Background.

Sunt două metoda posibilă Efectuați un element transparent: proprietatea opacității descrisă mai sus și indicând culoarea de fundal în format RGBA.

Poate că sunteți deja familiarizat cu modelul de reprezentare a culorilor în format RGB. RGB (roșu, verde, albastru - roșu, verde, albastru) - sistem de culori, care definește o umbră prin amestecarea roșii, verde și albastru. De exemplu, pentru a seta o culoare galbenă pentru text, puteți utiliza oricare dintre următoarele anunțuri:

Culoare: RGB (255,255,0); Culoare: RGB (100%, 100%, 0);

Culorile specificate utilizând RGB vor diferi de valorile hexazecimale pe care le folosim înainte de care vă permit să utilizați canalul de transparență alfa. Aceasta înseamnă că prin intermediul elementului cu transparență alfa se va vedea ceea ce se află sub el.

Anunțul de culoare RGBA este similar cu sintaxa cu reguli standard RGB. Cu toate acestea, printre altele, va trebui să declarăm ca RGBA (în loc de RGB) și să stabilim o valoare suplimentară de transparență zecimală după valoarea de culoare din intervalul de la 0,0 (transparență completă) la 1 (opacitate completă).

Culoare: RGBA (255,255,0,0,5); Culoare: RGBA (100%, 100%, 0,0,5);

Diferența dintre opacitatea și proprietatea RGBA este că proprietatea opacității aplică transparența întregului element al întregului element, adică întregul conținut al elementului devine transparent. Și RGBA vă permite să setați transparența în părțile individuale ale elementului (de exemplu, numai text sau fundal):

Corp (ICPG) .PRIM1 (Lățime: 400px; Marginea: 30px 50px; fundal-culoare: #ffffff; margine: 1px negru solid; Font-greutate: Bold; Opacitate: 0,5; Filtru: Alpha (opacitate \u003d 70); / * pentru IE8 și versiuni anterioare * / Text-align: centru;) .PRIM2 (lățime: 400px; margine: 30px 50px; fundal-culoare: RGBA (255,255,255,0,5); Border: 1px negru solid; Font-greutate: Bold ; Text-align: centru;) încercați »

Notă: Valorile RGBA nu sunt acceptate în browserul IE8 și în versiunile anterioare. Pentru a decide opțiunea de backup pentru browserele vechi care nu acceptă valorile de culoare cu canale alfa, ar trebui să o specificați mai întâi la valoarea RGBA: Fundal: RGB (255.255,0); Fundal: RGBA (255,255,0,0,5);

Efectul translucidității elementului este bine vizibil fundal și am avut distribuție în diferite sisteme de operarePentru că arată elegant și frumos. În designul web, se aplică și transluciditatea și se realizează datorită proprietății opacității sau a formatului de culoare RGBA, care este setat pentru fundal.

Proprietatea opacității

Principala caracteristică a acestei proprietăți este că valoarea transparenței acționează asupra tuturor elementelor copilului din interior și nu numai pe fundal. Aceasta înseamnă că fundalul și textul vor deveni translucide și vor crește nivelul de transparență, adăugarea, nu va funcționa. În fila. 1 prezintă tipul de text și fundal cu valori diferite de opacitate.

Exemplul 1 prezintă crearea unei unități translucide folosind opacitatea.

Exemplu 1. Fundal pe pagina web

HTML5 CSS3 IE 9+ CR OP SA FX

RGBA.

De obicei, proiectarea elementului trebuie să fie translucidă pe design, iar textul este opac pentru a-și păstra lizibilitatea. Proprietatea opacității nu se potrivește aici, deoarece textul din interiorul elementului va fi, de asemenea, parțial transparent. Cel mai bine este să utilizați formatul RGBA, parte din care este un canal alfa sau cu alte cuvinte, valoarea de transparență. RGBA este scrisă ca o valoare, apoi în paranteze prin virgulă, sunt enumerate valorile componentelor roșii, albastre și verzi. Acesta din urmă este transparența, care stabilește de la 0 la 1 (figura 1), în timp ce 0 înseamnă o transparență completă și 1 opacitate de culoare ..

Smochin. 1. Sintaxa aplicației RGBA

Exemplul 2 prezintă utilizarea formularului RGBA pentru a crea un fundal translucid.

Exemplul 2. Fundal translucid

HTML5 CSS3 IE 9+ CR OP SA FX

Rezultat acest exemplu prezentat în fig. 2. Valoarea opacității pentru fundal este setată la 90%.

Smochin. 2. Fundal translucid și textul opac

Proprietatea CSS RGBA vă permite să setați o culoare de fundal cu un canal alfa (adică blocuri de suprasarcină prin culoarea translucidă).

Desigur, în CSS există o proprietate de opacitate, dar principalul său dezavantaj: toate elementele copilului din blocul transparent vor moșteni și transparența.

Cel mai adesea, umplerea fundalului unui element de un pixel PNG24 și un fiscați de transparență în IE6 sunt utilizate sau fundalul este transparent prin opacitatea CSS. Textul este poziționat separat într-un alt element, dar acest lucru, în opinia mea, nu este destul de confortabil ...

Prin intermediul RGBA. Soluția arată astfel:

1. Să presupunem că avem nevoie de un fundal albastru cu transparență de 50%.

Și nu susține că va fi IE6-8, Opera 9.x, Mozilla Firefox. 2.x.

2. Pentru IE, puteți încerca să faceți mai elegant:

.. Filtru: PROGID: DXIMAGETRANSFO.Microsoft .Gradient (StartColorstr \u003d # 990000FF, ENDCOLORSTR \u003d # 990000FF); Zoom: 1;)

Notă: Culoarea în filtru este setată la 8 numere. Primele 2 numere sunt gradul de transparență: FF este complet opac, 00 este transparent. Următoarele 6 numere sunt designul HTML obișnuit.

Utilizarea RGBA nu este limitată la culoarea de fundal din blocuri ...

CSS are trei modalități de a schimba transparența articolului:
folosind proprietatea opacității,
folosind funcția RGBA (),
utilizând funcția HSLA ().

1. Proprietatea opacității

Proprietatea opacității vă permite să faceți niciun element al paginii web parțial sau complet transparent. Această proprietate modifică transparența elementelor pentru care este setată imaginea de fundal (imagine) sau un fundal cu o culoare sau un gradient. Dacă elementul pentru care se aplică proprietatea opacității, conține alte elemente în sine, își vor schimba și transparența.
Proprietatea opacității ia valori în intervalul de la 0 (complet transparent) la 1 (opac), de exemplu:

H1 (Culoare: # CD6829;) DIV (fundal: # CDD6DB; Opacitate: .3;)
Smochin. 1. Transparența elementelor care utilizează opacitatea

2. Funcția RGBA ()

Modelul de culoare RGBA creează o nuanță de culoare prin amestecarea în proporțiile necesare roșu (roșu), verde (verde) și albastru (albastru) Flori, A. alfa canal (alfa) Responsabil pentru gradul de transparență a culorii. Spre deosebire de proprietatea opacității, pentru un bloc care conține alte elemente, funcția RGBA () va schimba numai transparența blocului.

Smochin. 2. Modelul de culoare RGB H1 (Culoare: # CD6829;) DIV (fundal: RGBA (205, 214, 219, 0,3);)
Smochin. 3. Transparența elementelor folosind funcția RGBA ()

3. Funcția HSLA ()

Funcția Hsla (), a cărei parametri înseamnă ton (Hue), saturare, lightness (Lightness) și alfa canal (alfa)De asemenea, vă permite să specificați culoarea translucidă.

Nuanțele de culoare sunt setate ca procent utilizând valoarea corespunzătoare din cercul de culoare. Gama însăși este împărțită în sectoare, pe granițele cărora sunt culorile principale:

0/360 ° - roșu
60 ° - galben
120 ° - verde
180 ° - Culoare albastră
240 ° - Culoare albastră
270 ° - Culoare violet
300 ° - culoarea magenta.

Pentru a obține negru, trebuie să atribuiți indicatoare de ton, saturație și luminozitate valorile Zero - HSLA (0, 0%, 0%, 1). Culoarea albă este obținută cu o valoare de luminozitate HSLA 100% (0, 0%, 100%, 1) și culoare gri - la valoarea zero a saturației HSLA (0, 0%, 50%, 1).