Există trei moduri de a schimba transparența unui element în CSS:
folosind proprietatea de opacitate,
folosind funcția rgba (),
folosind funcția hsla ().

1. Proprietatea opacității

Proprietatea opacitate vă permite să faceți orice element al unei pagini web parțial sau complet transparent. Această proprietate modifică transparența elementelor care au o imagine de fundal (imagine) sau un fundal cu o culoare sau un gradient. Dacă elementul pentru care este aplicată proprietatea de opacitate conține alte elemente în cadrul acestuia, atunci acestea își vor modifica și opacitatea.
Proprietatea opacității variază de la 0 (complet transparent) la 1 (opac), de exemplu:

H1 (culoare: # CD6829;) div (fond: # CDD6DB; opacitate: .3;)
Orez. 1. Transparența elementelor folosind opacitatea

2. Funcția rgba ().

Modelul de culoare RGBA creează o dominantă de culoare prin amestecarea în proporțiile necesare roșu (roșu), verde (verde)și albastru culori, și canal alfa (alfa) este responsabil pentru gradul de transparență al culorii. Spre deosebire de proprietatea opacității, pentru un bloc care conține alte elemente, funcția rgba () va schimba doar opacitatea blocului.

Orez. 2. Model de culoare RGB h1 (culoare: # CD6829;) div (fond: rgba (205, 214, 219, 0,3);)
Orez. 3. Transparența elementelor folosind funcția rgba ().

3. Funcția hsla ().

Funcția Hsla () ai cărei parametri înseamnă ton (nuanță), saturare, luminozitate (luminozitate)și canal alfa (alfa), vă permite de asemenea să setați o culoare semi-transparentă.

Nuanțele de culoare sunt specificate ca procent folosind valoarea corespunzătoare din roata de culori. Cercul în sine este împărțit în sectoare, pe marginile cărora există culori primare:

0/360 ° - roșu
60 ° - galben
120 ° - verde
180 ° - albastru
240 ° - albastru
270 ° - violet
300 ° este magenta.

Pentru a obține negru, trebuie să setați valorile de nuanță, saturație și luminozitate la zero - hsla (0, 0%, 0%, 1). Albul este obținut la 100% luminanță hsla (0, 0%, 100%, 1), iar griul este obținut la saturație zero hsla (0, 0%, 50%, 1).

Odată cu apariția CSS3, munca designerilor de layout a devenit mult mai ușoară și mai logică: acum puteți personaliza cu adevărat flexibil orice obiect, folosind JavaScript din ce în ce mai puțin. Să presupunem că trebuie să ajustați transparența fundalului - CSS oferă imediat mai multe opțiuni.

Fundalul este stabilit de un set de atribute, background-repeat, background-attachment, background-origin, background-clip, background-culoare), iar fiecare dintre ele poate fi scris separat sau combinat sub atributul fundal. Să aruncăm o privire mai atentă la fiecare dintre ele.

Atribut de culoare de fundal

Chiar și IE8 acceptă această metodă. Mai multe imagini sunt folosite ca fundal pentru aspectul fluid. Cel mai important, nu uitați să setați culoarea de fundal în CSS atunci când utilizați orice imagine, deoarece este posibil ca imaginea pur și simplu să nu se încarce pentru utilizatori.

Atribut de poziție de fundal

Dacă utilizați o imagine pentru a seta fundalul unui bloc, CSS vă va permite să poziționați imaginea oriunde pe ecran. În mod implicit, imaginea este situată în colțul din stânga sus. Atributul acceptă fie indicații verbale (sus, jos, stânga, dreapta), fie indicații numerice (procente, pixeli și alte unități). În acest caz, trebuie să specificați două valori: orizontal și vertical:

body (background-position: right center;) - în acest exemplu, fundalul va fi situat în partea dreaptă a paginii, cu aceleași distanțe de jos și de sus față de imagine.

Atribut dimensiunea fundalului

Uneori trebuie să utilizați CSS pentru a întinde sau reduce dimensiunea fundalului. Pentru aceasta se folosește atributul background-size, iar dimensiunea fundalului poate fi setată atât în ​​pixeli sau procente, cât și în orice alte unități de măsură.

Există câteva probleme cu acest atribut: prefixele trebuie folosite pentru a afișa corect fundalul în versiunile anterioare ale browserelor. Desigur, versiunile actuale acceptă pe deplin acest atribut și nevoia de proprietăți specifice a dispărut.

Atribut de atașament de fundal

Acest atribut specifică comportamentul de defilare al imaginii de fundal. Deci, poate lua 3 valori (excluzând moștenirea, care este comună tuturor atributelor prezentate în acest articol):

• fix- face imaginea de pe fundal nemișcată;
• sul- fundalul defilează împreună cu restul elementelor;
• local- imaginea din fundal defilează dacă conținutul are derulare. Sunt capturate fundaluri care depășesc conținutul.

Exemplu de utilizare:

corp (fond-ataș fix).

Firefox nu acceptă în prezent această din urmă proprietate (locală).

Atribut de origine-fond

Acest atribut este responsabil pentru poziționarea elementului. Browserele anterioare necesită utilizarea prefixelor. Proprietatea în sine are trei parametri:

• padding-box poziționează fundalul față de margine, ținând cont de grosimea cadrului;
• cutie-chenar diferă de proprietatea anterioară prin aceea că linia de frontieră se poate suprapune complet sau parțial cu fundalul;
• caseta de conținut poziționează imaginea legând-o de conținut.

Dacă sunt date mai multe valori, browserele pot reacționa diferit: Firefox și Opera acceptă doar prima opțiune.

Atribut de repetiție de fundal

De obicei, dacă un fundal este definit de o imagine, acesta ar trebui să se repete orizontal sau vertical. Pentru aceasta este atributul background-repeat. Deci, fundalul unui bloc al cărui CSS conține o astfel de proprietate poate avea unul dintre mai mulți parametri:

• fără repetare- imaginea apare pe pagină într-o singură versiune;
• repeta- fundalul se repetă de-a lungul axelor x și y;
• repeta-x- numai pe orizontală;
• repeta-y- numai pe verticală;
• spaţiu- fundalul se repetă, dar dacă spațiul nu poate fi umplut, atunci apar goluri între poze;
• rundă- imaginea este scalată dacă este imposibil să umpleți întreaga zonă cu imagini întregi.

Un exemplu de utilizare a atributului:

body (background-repeat: repetiție fără repetare)- la fel background-repeat: repetare-y.

În CSS3, este posibil să setați valori pentru mai multe imagini prin enumerarea parametrilor separați prin virgule.

Atribut de clip de fundal

Acest atribut definește comportamentul fundalului sub margini (de exemplu, în cazul marginilor întrerupte):

• padding-box- fundalul este afisat strict in interiorul blocului;
• cutie-chenar- imaginea trece sub rame;
• caseta de conținut- imaginea din fundal apare doar în interiorul conținutului.

Exemplu de utilizare:

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

Chrom și Safari necesită prefixul -webkit-.

Opacitate și atribute de filtrare

Atributul de opacitate vă permite să setați transparența fundalului - proprietatea CSS va funcționa în toate browserele. Valoarea este setată în intervalul de la 0,0 la 1,0 inclusiv. În acest caz, puteți seta transparența fundalului CSS fără o valoare întreagă: în loc de 0,3, este suficient să scrieți 3:

.block (imagine de fundal: url (img.png); opacitate: .3;).

Pentru a seta transparența fundalului, al cărui CSS va funcționa chiar și pentru IE sub cea de-a noua versiune, utilizați atributul de filtru:

.block (imagine de fundal: url (img.png); filtru: alfa (opacitate = 30);).

În acest caz, valoarea opacității este setată în intervalul de la 0 la 100. Rețineți că atributul de opacitate diferă de setarea opacității folosind RGBA în moștenire: atunci când utilizați opacitatea, nu numai fundalul devine transparent, ci și toate elementele din interiorul blocului. .

Urmăriți întotdeauna statisticile de utilizare a browserelor în CSI și în toate celelalte țări. Cea mai mare problemă a tuturor designerilor de layout sunt versiunile vechi de IE, acestea nu permit utilizarea completă a CSS3. Când codați, nu uitați să utilizați servicii speciale care verifică dacă browserul dvs. acceptă vreo proprietate CSS. Dacă nu puteți instala versiuni vechi de browsere, găsiți un serviciu care va verifica funcționarea site-ului web în diferite browsere online.

În această lecție, vom analiza astfel CSS proprietati - opacitateși RGBA... Proprietate Opacitate este responsabil doar pentru transparența elementelor și a funcției RGBA- pentru culoare și transparență, dacă specificați valoarea transparenței canalului alfa.

Opacitatea CSS

Valoare numerică pentru opacitate specificat în intervalul de la 0,0 la 1,0, unde zero este transparența totală și unu, dimpotrivă, este opacitatea absolută. De exemplu, pentru a vedea 50% transparență, trebuie să setați valoarea la 0,5. Trebuie avut în vedere faptul că opacitate se extinde la toți copiii părintelui. Aceasta înseamnă că textul pe un fundal translucid va fi, de asemenea, translucid. Și acesta este deja un dezavantaj foarte semnificativ, textul nu iese atât de bine în evidență.

În captură de ecran, puteți vedea clar că textul negru a devenit la fel de translucid ca fundalul albastru.

Div (
fundal: url (imagini / imaginea ta.jpg); / * Imagine de fundal * /
latime: 750px;
înălțime: 100px;
margine: auto;
}
.albastru (
fundal: # 027av4; / * Culoare de fundal semi-transparentă * /
opacitate: 0,3; / * Valoarea translucidității fundalului * /
înălțime: 70px;
}
h1 (
umplutură: 6px;
familie de fonturi: Arial Black;
font-weight: îndrăzneț;
dimensiunea fontului: 50px;
}

Transparență CSS în format RGBA

Format pentru înregistrarea culorii RGBA, este o alternativă mai modernă la proprietate opacitate. R (roșu), G (verde), B (albastru)- înseamnă: roșu, verde, albastru. Ultima scrisoare A- înseamnă canalul alfa, care stabilește transparența. RGBA Spre deosebire de Opacitate nu afectează copiii.

Acum să ne uităm la exemplul nostru de utilizare RGBA... Să înlocuim aceste linii în stiluri.

Fundal: ## 027av4; /* Culoare de fundal */
opacitate: 0,3; / * valoarea translucidității fundalului * /

la următoarea linie

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

După cum puteți vedea, valoarea transparenței de 0,3 este aceeași pentru ambele metode.

Rezultatul exemplului cu RGBA:

A doua captură de ecran arată mult mai bine decât prima.

Jucându-vă cu transluciditatea fundalului blocurilor, puteți obține efecte interesante pe site. Este important ca aceste blocuri translucide să treacă peste un design variat, cum ar fi o fotografie. Numai în acest caz efectul va fi vizibil. Această tehnică a fost folosită de mult în design, chiar înainte de apariția oricăruia CSS3, a fost implementat exclusiv în programe de grafică.

Dacă clientul solicită ca aspectul să arate bine în versiunile mai vechi ale browserului Internet Explorer apoi adăugați proprietate filtruși nu uitați să comentați pentru ca valabilitatea codului să nu fie afectată.

Ieșire

Format RGBA sunt acceptate de toate browserele moderne, cu excepția Internet Explorer... De asemenea, este foarte important ca RGBA flexibil, actioneaza doar asupra unui anumit element specificat, fara a afecta copiii. Este clar că acest lucru este mai convenabil pentru designerul de layout. Alegerea mea este clar în favoarea formatului RGBA a primi transparență în CSS.

Pentru o mai bună consolidare a materialului și o mai mare claritate, vă sugerez să treceți prin.

Efectul de transluciditate al unui element este clar vizibil în imaginea de fundal și a devenit larg răspândit în diferite sisteme de operare, deoarece arată elegant și frumos. În designul web, transluciditatea este de asemenea aplicată și obținută prin proprietatea opacității sau formatul de culoare RGBA care este setat pentru fundal.

Proprietatea opacității

Caracteristica principală a acestei proprietăți este că valoarea transparenței afectează toți copiii din interior, nu doar fundalul. Aceasta înseamnă că atât fundalul, cât și textul vor deveni translucide și nu veți putea crește nivelul de transparență prin adăugare. Masa 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.

Exemplu 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 semi-transparent, iar textul ar trebui să fie opac pentru a menține lizibilitatea. Proprietatea opacității este nepotrivită aici deoarece textul din interiorul elementului va fi, de asemenea, parțial transparent. Cel mai bine este să utilizați formatul RGBA, din care face parte canalul alfa, sau cu alte cuvinte valoarea transparenței. Valoarea este scrisă rgba, apoi valorile componentelor de culoare roșu, albastru și verde sunt enumerate între paranteze separate prin virgulă. Ultima este transparența, care este setată de la 0 la 1 (Fig. 1), cu 0 fiind transparența completă și 1 fiind opacitatea culorii.

Orez. 1. Sintaxă pentru utilizarea rgba

Exemplul 2 arată formatul RGBA folosit pentru a crea un fundal semi-transparent.

Exemplul 2. Fundal semi-transparent

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Rezultatul acestui exemplu este prezentat în Fig. 2. Valoarea opacității pentru fundal este setată la 90%.

Orez. 2. Fundal semi-transparent și text opac