Astăzi vreau să vorbesc despre fundalul transparent al unui bloc de text, cum se face, și ce oferă CSS3 pentru acest lucru. Înainte de a trece la rgba și hsla, vom lua în considerare exemplele de utilizare a unui fundal semi-transparent pentru un bloc cu text sau, mai precis, modul în care este realizat și ce probleme apar. Pentru demonstrație, vom folosi această imagine, prelucrată de un program pe java, iar legătura la care, din păcate, a fost mult pierdută.
Ne uităm la imaginea de mai jos. Există un fundal grafic pe care doriți să puneți un bloc de text translucid. În mod ideal, ar trebui să fie ceva în imaginea de sub numărul 2, dar se poate întâmpla ca, sub numărul 3. Există un alt defect, ci o mențiune de ea verbal de mai jos, ca otskrinshotit nu a fost posibil.
Fundal translucid fără rgba și hsla
- PNG translucid. Opțiunea optimă, deoarece astăzi este cel mai cross-browser și cel mai simplu. Pentru ca blocul să fie transparent, este necesar un PNG translucid de un pixel, care este specificat ca fundal al blocului. Și asta e tot.
Dezavantaje. Doar unul - necesită un hack pentru IE6 și mai mic, eliminând problema translucidității.
opacitate: 0,5;
filtru: alfa (opacitate = 50);
-moz-opacitate: 0,5;
unde 0,5 și 50 sunt transparente de 50%. Dar există o problemă. Dacă setăm blocul trebuie să fie atât de translucenți, atunci vom vedea cea de-a treia opțiune din imaginea de mai sus - conținutul blocului va deveni, de asemenea, translucid. Cu toate acestea, există o poziție de ieșire liberă, prin intermediul căreia un alt bloc este plasat sub blocul de text, la care se specifică transluciditatea.
Să luăm în considerare un exemplu. Bloc cu imaginea Presupunem că portocaliu - este corpul etichetei, containerul care va text și substrat transparent - #block_bg, în interiorul căruia un bloc cu un fundal #block_transparent translucid, și blocul cu text - #block_text.
corp
#block_bg position: relative;
overflow: ascuns;
lățime: 400px;
padding: 10px;
>
#block_text
#block_transparent <
opacitate: 0,5;
filtru: alfa (opacitate = 50);
-moz-opacitate: 0,5;
fundal: #fff;
poziția: absolută;
top: 0;
stânga: 0;
z-index: 90;
înălțime: 5000px;
lățime: 400px;
>
Vă atrag atenția că este necesar să se stabilească lățimea blocului transparent (rândul 19), în caz contrar acesta va rula într-un pixel, iar lățimea blocului comun (linia 5), în caz contrar textul va merge dincolo de blocul transparent (deși lățimea poate fi, și textul pentru a cere, dar diferența fundamentală nu este va). În scopul de a se retrage din text și marginea clară a blocului, folosind padding în al șaselea rând. Pentru transparența are (linia 18), o înălțime reglabilă, setat la un înălțime mai mică și suprapunerea unui bloc comun (linia 4).
Deci, am împins totul într-un bloc, care poate fi împins în orice parte a paginii, unde există un substrat interesant. Da, ar putea fi o dorinta de a pune un bloc blockblog de fundal comun, dar este mai bine sa nu-ti complici viata (in functie, desigur, de sarcina). Cu alte cuvinte, este mai bine să împingeți toată această construcție într-un bloc separat, care este de a seta căptușeala și de a nu suferi.
Dezavantaje. Prea greoaie.
rgb și hsl, rgba și hsla sunt proprietăți CSS3
Mai exact, acestea nu sunt exact proprietăți - aceasta este o nouă opțiune pentru setarea culorilor pentru proprietăți, cum ar fi fundalul, culoarea, marginea etc.
Numele proprietăților a trecut de la sistemele de culori RGB (roșu, verde, albastru) și de la HSL (Hue, Satutation, Lightness). Primul sistem descrie spațiul de culoare prin amestecarea culorilor primare - roșu, verde și albastru. În cel de-al doilea sistem, componentele color afișează informații de culoare într-o formă mai familiară pentru o persoană: Ce este această culoare? Cât de bogat este? Este lumină sau întuneric?
Să începem cu rgb și rgba. Valorile r, g, b pot fi setate de la 0 la 255 sau de la 0% la 100%. Valoarea unui (alfa, transparența) este măsurată de la 0 la 1 (valorile fracționate sunt stabilite prin punctul - 0.4, 0.7, etc.). Dacă pentru r, g și b sunt stabilite valori care depășesc intervalul admis (de exemplu, 300 sau 110% sau -5), acestea vor fi reduse la cea mai apropiată valoare admisă.
Să aruncăm o privire asupra proprietății fundalului (deși puteți lua culoarea sau marginea).
fundal: rgb (0, 0, 255); / * culoarea pur albastru * /
fundal: rgb (100%, 50%, 0%); / * culoarea pur albastru * /
fundal: rgb (10, 145, 500); / * vor fi recunoscute ca 10, 145, 255 * /
fundal: rgba (10, 145, 255, 1); / * este același cu cel precedent * /
fundal: rgba (100, 50, 255, 0,1); / * umbra foarte transparenta de liliac * /
Da, am uitat să spun că nu puteți pune un gol între proprietate și paranteza de deschidere și nu puteți specifica într-o singură linie unele valori în numere obișnuite și altele în procente. Dacă o faci, nimic nu va funcționa.
Și câteva cuvinte despre hsl și hsla. Valoarea lui a este setată la fel ca rgb și rgba, dar cu primii trei parametri situația este puțin diferită. h este setat de la 0 la 360 și s și l sunt de la 0% până la 100%.
Și cel mai important. În cazul în care rgb pentru a determina culoarea de la cap este foarte dificil (aproape întotdeauna nevoie de un program de terță parte cu o "pipetă"), atunci aici este suficient pentru a avea o imagine în fața ochilor, astfel încât totul să cadă în loc. Imaginea indică nuanța parametrului h.
Pentru a estima culoarea dorită, alege o culoare, apoi se preface că s, saturație a culorilor (unde 0% - aceasta este o culoare nesaturată (nuanță de gri) și 100% - saturația) și luminozitate (0% - în cazul în care culoarea va fi întotdeauna negru, iar când 100% - alb). Pe baza celor de mai sus, imaginea prezentată în tonuri de lumină la 100% saturație și luminozitate de 50%.
Acum tot spațiul de culoare din cap este ca și în palma mâinii tale. Desigur, selecția manuală nu înlocuiește pipeta și nu toată lumea trebuie să aibă un "spațiu de culoare" în cap, dar uneori, pentru a estima rapid ceea ce este necesar și potestit - se potrivește.
Și doar câteva exemple
fundal: hsl (180, 100%, 50%); / * culoarea albastră intensă * /
fundal: hsla (140, 50%, 30%, 0,5); / * translucid, este greu de observat că nuanța de verde * /
Dezavantaje. toate cele 4 proprietăți nu sunt acceptate de browserele vechi și de fund.
În general, CSS3 oferă lucruri foarte utile, dar, ca întotdeauna, IE este frâna principală a progresului. Pentru site-urile clienților, aș refuza să-l folosesc (voi fi în continuare capabil să fac un creier din ea) și să ia opțiunea cu PNG. Și pe site-ul dvs. - de ce nu. Mai ales dacă este vizitat de oameni avansați care nu stau pe măgari sau fragmente de antichitate.