Efectul translucid al elementului este clar vizibil pe imagine de fundalşi s-a răspândit în diverse sisteme de operare pentru că arată elegant și frumos. În web design, transluciditatea este, de asemenea, utilizată și este obținută prin proprietatea opacității sau formatul de culoare RGBA care este setat pentru fundal.

Proprietatea opacității

Principala caracteristică a acestei proprietăți este că valoarea transparenței afectează totul elemente copilîn interior, și nu doar în fundal. Aceasta înseamnă că atât fundalul, cât și textul vor deveni translucide și nu veți putea crește nivelul de transparență adăugând . În tabel Figura 1 arată aspectul textului și al fundalului cu diferite valori de opacitate.

Exemplul 1 arată cum să creați un bloc semi-transparent folosind opacitatea.

Exemplul 1: fundal pe o pagină web

HTML5 CSS3 IE 9+ Cr Op Sa Fx

RGBA

De obicei, prin design, doar fundalul unui element ar trebui să fie translucid, iar textul ar trebui să fie opac pentru a menține lizibilitatea. Proprietatea opacitate nu este potrivită aici deoarece textul din interiorul elementului va fi, de asemenea, parțial transparent. Cel mai bine este să utilizați formatul RGBA, care are un canal alfa sau, cu alte cuvinte, o valoare de transparență ca parte a acestuia. Valoarea este scrisă rgba, apoi valorile componentelor de culoare roșu, albastru și verde sunt enumerate în paranteze, separate prin virgule. Ultima este transparența, care este setată de la 0 la 1 (Fig. 1), cu 0 însemnând transparență completă și 1 opacitatea culorii.

Orez. 1. Sintaxă pentru utilizarea rgba

Exemplul 2 arată utilizarea formatului RGBA pentru a crea un fundal translucid.

Exemplul 2. Fond translucid

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Rezultatul acestui exemplu este prezentat în Fig. 2. Opacitatea fundalului este setată la 90%.

Orez. 2. Fundal translucid și text opac

Salutare tuturor. După cum probabil știți, fundalul este o proprietate CSS care vă permite să setați o culoare de fundal sau să încărcați o imagine pentru a acționa ca fundal. CSS3 a introdus și capacitatea de a crea gradienți liniari și radiali, dar acesta este un subiect pentru un alt articol. În aceasta, am vrut să vă spun cum să setați transparența pentru proprietatea de fundal în CSS.

Setați transparența pentru fundal CSS

Deci, toate acestea se realizează foarte simplu datorită unui format de înregistrare color precum rgba. Dacă lucrezi cu editori grafici, atunci probabil știți că modul de culoare rgb reprezintă aceasta: proporția de roșu (roșu), proporția de verde (verde) și albastru (albastru). Deci, rgba este practic același, se mai adaugă un singur parametru - transparența. Este scris astfel:

Culoare de fundal: rgba(173, 57, 22, 0,5)

Mai întâi indicăm în mod explicit că setăm culoarea în modul rgba. Apoi indicăm valorile de saturație ale celor trei culori primare de la 0 la 255, unde 255 este cea mai mare saturație. Al patrulea parametru este transparența noastră. Valoarea de la 0 la unu este scrisă aici. 1 este un element complet opac, iar 0 este un element complet transparent. În consecință, dacă îl setați la 0, atunci culoarea de fundal nu va fi vizibilă deloc.

Acum știți cum să setați proprietatea de fundal la transparență în CSS. Pentru a face acest lucru, trebuie să utilizați modul de culoare rgba. Există, de asemenea, o proprietate de opacitate, dar se aplică întregului element ca întreg. Adică, atunci când se aplică opacitatea, transparența poate fi aplicată textului, făcându-l ilizibil.

Exemplu de fundal transparent

Avantajele unui fundal translucid sunt ușor de arătat cu un exemplu. De exemplu, avem un fundal general al paginii. Iată cum ar arăta blocul dacă i s-ar oferi o culoare neagră solidă:

Acum să setăm aceeași culoare neagră pentru bloc, dar să o specificăm folosind format de culoare rgba, specificând ultima valoare ca 0,7, de exemplu. Se va dovedi astfel:
Acum fundalul blocului este vizibil prin el și imaginea de fundal este vizibilă prin el. Această imagine și fundalul sunt doar de exemplu. După cum vă puteți imagina, transparența de fundal în CSS poate fi utilă atunci când doriți ca fundalul unui element imbricat să se arate fără a ascunde alte fundaluri situate pe alte straturi.

Setarea culorii în sine folosind rgba nu este dificilă. După cum sa menționat deja, primele trei litere înseamnă cele trei culori primare: roșu, verde și albastru, sau mai degrabă cota lor (de la 0 la 255). Prin setarea unor valori diferite, puteți obține milioane de culori diferite, iar transluciditatea vă va permite să veniți cu efecte mult mai frumoase pentru site, dacă este necesar.

Descriere

Definește culoarea de fundal a elementului. Deși această proprietate nu moștenește proprietățile părintelui său, datorită faptului că valoarea initiala este setat la transparent, culoarea de fundal a elementelor secundare se potrivește cu culoarea de fundal a elementului părinte.

Sintaxă

culoare de fundal:<цвет>| transparent | moşteni

Valori

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.

ÎN în acest exemplu trei sunt folosite pentru elementele paginii web căi diferite setarea culorii de fundal. Rezultatul exemplului este prezentat în Fig. 1.

Orez. 1. Aplicarea culorii de fundal

Model obiect

document.getElementById("elementID").style.backgroundColor

Browsere

Versiunile de Internet Explorer până la 7.0 inclusiv nu acceptă valoarea de moștenire.

Pentru a crea un efect transparent în CSS, se folosește proprietatea opacitate.

IE8 și versiunile anterioare acceptă o proprietate alternativă - filter:alpha(opacity=x) , unde " x " poate varia de la 0 la 100 , cu cât valoarea este mai mică, cu atât elementul va fi mai transparent.

Toate celelalte browsere acceptă standard proprietate CSS opacitate , care poate lua un număr de la 0,0 la 1,0 ca valoare; cu cât valoarea este mai mică, cu atât elementul va fi mai transparent:

Încerca "

Transparență la hover

Pseudo-clasă:hover vă permite să schimbați aspect elemente când treceți cursorul mouse-ului peste ele. Vom folosi această funcție pentru a face ca imaginea să-și piardă transparența atunci când trece cu mouse-ul peste:

Încerca "

Transparența fundalului

Sunt două moduri posibile face elementul transparent: proprietatea de opacitate descrisă mai sus și specificând culoarea de fundal în format RGBA.

Este posibil să fiți deja familiarizați cu modelul de reprezentare a culorilor RGB. RGB (Roșu, Verde, Albastru - roșu, verde, albastru) este un sistem de culori care determină nuanța prin amestecarea roșu, verde și albastru. De exemplu, pentru a seta culoarea textului la galben, puteți utiliza oricare dintre următoarele declarații:

Culoare: rgb(255,255,0); culoare: rgb(100%,100%,0);

Culorile specificate folosind RGB vor diferi de valorile hexazecimale pe care le-am folosit anterior prin faptul că permit utilizarea unui canal de transparență alfa. Aceasta înseamnă că prin fundalul unui element cu transparență alfa, ceea ce se află sub acesta va fi vizibil.

Declararea unei culori RGBA este similară ca sintaxă cu regulile RGB standard. Cu toate acestea, va trebui, de asemenea, să declarăm valoarea ca RGBA (în loc de RGB) și să specificăm o valoare suplimentară de transparență zecimală după valoarea culorii între 0,0 (complet transparent) și 1 (complet opac).

Culoare: rgba(255,255,0,0.5); culoare: rgba(100%,100%,0,0.5);

Diferența dintre proprietatea de opacitate și proprietatea RGBA este că proprietatea de opacitate aplică transparență întregului element, ceea ce înseamnă că întregul conținut al elementului devine transparent. Și RGBA vă permite să setați transparența părților individuale ale unui element (de exemplu, doar textul sau fundalul):

Corp ( imagine de fundal: url(img.jpg); ) .prim1 ( lățime: 400px; marjă: 30px 50px; culoarea fundalului: #ffffff; chenar: 1px negru solid; greutate font: bold; opacitate: 0,5; filtru : alpha(opacity=70); /*pentru IE8 și versiuni anterioare*/ text-align: center; ) .prim2 ( lățime: 400px; margine: 30px 50px; background-color: rgba(255,255,255,0.5); chenar: 1px solid negru; greutate font: bold; text-align: center; ) Încercați »

Notă: valorile RGBA nu sunt acceptate în IE8 și mai sus versiuni anterioare. Pentru a declara o culoare de rezervă pentru browserele mai vechi care nu acceptă valori de culoare alfa, ar trebui să o specificați mai întâi înainte de valoarea RGBA: background: rgb(255,255,0); fundal: rgba(255,255,0,0.5);

Proprietatea CSS RGBa vă permite să setați o culoare de fundal cu un canal alfa (adică să umpleți blocurile cu o culoare semi-transparentă).

Desigur, CSS are o proprietate de opacitate, dar principalul său dezavantaj este că toate elementele copil din interiorul unui bloc transparent își vor moșteni și opacitatea.

Cel mai adesea, folosesc PNG24 de un pixel pentru a umple fundalul unui element și pentru a fixa transparența în IE6 sau pentru a face fundalul transparent folosind opacitatea css. Textul este poziționat separat într-un alt element, dar acest lucru, după părerea mea, nu este în totalitate convenabil...

Prin utilizarea RGBa solutia arata cam asa:

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

Dar IE6–8, Opera 9.x, nu îl va accepta, Mozilla Firefox 2.x

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

Notă: Culoarea din filtru este specificată de 8 numere. Primele 2 numere sunt gradul de transparență: FF - complet opac, 00 - transparent. Următoarele 6 numere sunt desemnarea obișnuită a culorii HTML.

Utilizarea RGBa nu se limitează doar la culoarea de fundal a blocurilor...