CSS Transparență de fond. Fundal transparent sau text utilizând CSS

Odată cu apariția CSS3, munca designerilor de layout a devenit mult mai simplă și mai logică: acum este posibil să configurați cu adevărat un obiect flexibil, cu atât mai rar folosiți jаvascript. Să presupunem că trebuie să ajustați transparența fundalului - CSS oferă imediat mai multe opțiuni.

Fundalul este specificat de un set de atribute (fundal-imagine, fundal-poziție, fundal-mărime, fundal-repetare, atașament de fundal, fundal-origine, fundal-clip, fundal-culoare) și fiecare dintre acestea poate fi scris separat sau combinat sub atributul de fundal. Să analizăm fiecare dintre ele în detaliu.

Atributul culorii de fundal

În CSS culoarea de fundal puteți specifica în mai multe moduri: utilizând un cod hexazecimal, un nume de culoare sau o înregistrare RGB. În CSS3, a devenit posibilă utilizarea opțiunii RGBA în locul înregistrării RGB.

Codul de culoare hexazecimal este scris în proprietate după grila: culoarea de fundal: # FFDAB9. Dacă caracterele dintr-o astfel de înregistrare sunt potrivite în perechi, codul este de obicei scurtat: # ccff00 poate fi scris ca # cf0:

corp {fundal-culoare: # cf0-}.

Numele este chiar și în cele mai exotice flori. De exemplu, pe lângă roșu și alb standard, puteți utiliza NavajoWhite (#FFDEAD) sau Honeydew2 (# E0EEE0):

corp {fundal-culoare: violet-}.

Ultima versiune a înregistrării RGB sau RGBA vă permite să specificați nu numai culoarea, ci și transparența fondului CSS, dar metoda funcționează numai în IE peste versiunea 9. Alte browsere recunosc normal opțiunea cu transparență. Prin standardele W3C, este preferabil să se utilizeze RGBA în locul celui mai obișnuit RGB.

Ultima valoare pentru RGBA și stabilește opacitatea fundalului de la 0 (transparent) la 1 (opac).

Sunt mai multe semnificații neobișnuite. Culoarea de fundal poate fi setată cu HSL și HSLA. Ambele au fost adăugate la CSS3 și, prin urmare, IE nu este acceptată sub versiunea 9. Materializări RGB identic sau RGBA, numai într-un format diferit: Hue (nuanță - valoare pe roata de culoare, este dat în grade), saturează (saturatie - intensitatea culorii ca procent, de la 0 la 100), Lightness (luminozitate - luminozitate, măsurată în mod similar parametrul saturează ).

Atributul de fundal-imagine

Versiunea cel mai cross-browser a fundalului transparent este utilizarea imaginii. În CSS3, puteți specifica chiar și câteva imagini, aceasta se face prin virgulă. exemplu:

corp {fundal-imagine: url (bg1.jpg), url (bg2.jpg)}.

Această metodă este acceptată chiar de IE8. Mai multe imagini ca fundal sunt folosite pentru impunerea de cauciuc. Principalul lucru, nu uitați, atunci când utilizați orice imagine, de asemenea, pentru a seta culoarea de fundal în CSS, deoarece utilizatorii nu pot pur și simplu boot imagine.

Atributul fundal-poziție

Dacă utilizați o imagine pentru a specifica fundalul unui bloc, CSS vă va permite să poziționați imaginea oriunde pe ecran. Implicit, imaginea este localizată în colțul din stânga sus. Atributul are instrucțiuni verbale (sus, jos, stânga, dreapta) sau numerice (procente, pixeli și alte unități de măsură). În acest caz, trebuie să specificați două valori: orizontal și vertical:

corp {fundal-poziție: centru drept-} - în acest exemplu, fundalul va fi situat în partea dreaptă a paginii, cu partea inferioară și superioară a distanței față de imagine fiind aceeași.

Atributul pentru dimensiunea fundalului

Uneori doriți să utilizați CSS pentru a întinde fundalul sau a reduce dimensiunea acestuia. Pentru a face acest lucru, utilizați dimensiunea fundalului atributului, iar dimensiunea fundalului poate fi specificată în pixeli sau procente și în orice alte unități de măsură.

Cu acest atribut există unele probleme: pentru afișarea corectă a fundalului în versiunile inițiale ale browserelor este necesar să se utilizeze prefixe. Desigur, versiunile actuale suportă pe deplin acest atribut și nevoia de proprietăți specifice a dispărut.

Atributul de atașament de fundal

Acest atribut specifică comportamentul imaginii de fundal atunci când derulați. Deci, poate lua 3 valori (fără a lua în considerare moștenirea, comun tuturor atributelor prezentate în acest articol):

• fix - face o imagine în fundal;
• sul - fundalul se rotește împreună cu restul elementelor;
• local - imaginea din fundal se derulează dacă derularea conține conținut. Un fundal care depășește conținutul este fixat.

Exemplu de utilizare:

corp {fix-atașament fix}.

În prezent, Firefox nu acceptă ultima proprietate (locală).

Atributul de origine de fond

Acest atribut este responsabil pentru poziționarea elementului. Browserele de versiuni anterioare necesită utilizarea prefixelor. Proprietatea însăși are trei parametri:

• padding-box poziționează fundalul în raport cu marginea, ținând cont de grosimea cadrului;
• frontieră-box diferă de proprietatea anterioară prin faptul că linia de graniță poate acoperi complet sau parțial fundalul;
• conținut-box poziționați imaginea, lăsând-o la conținut.

Dacă sunt specificate mai multe valori, atunci browserele pot reacționa în felul lor: Firefox și Opera percep numai prima opțiune.

Atributul de repetare a fundalului

De regulă, dacă fundalul este specificat de imagine, acesta trebuie repetat orizontal sau vertical. Pentru aceasta, se utilizează atributul de repetare a fundalului. Deci, fundalul unui bloc al cărui CSS conține o astfel de proprietate poate avea unul din câțiva parametri:

• fără repetare - imaginea apare pe pagină într-o singură variantă;
• repeta - fundalul se repetă de-a lungul axelor x și y;
• repeat-x - numai orizontal;
• repeat-y - numai vertical;
• spațiu - fundalul se repetă, dar dacă spațiul nu poate fi umplut, apar imagini între imagini;
• rotund - Imaginea este scalată dacă nu reușiți să completați întreaga zonă cu imagini întregi.

Un exemplu de utilizare a unui atribut:

corp {background-repeat: repetare fără repetare} - în mod similar repeat-repeat: repeat-y.

În CSS3, este posibil să specificați valori pentru mai multe imagini, dacă listați parametrii folosind o virgulă.

Atributul clip-fundal

Acest atribut definește comportamentul de fond sub limitele (de exemplu, în cazul cadrelor punctate):

• padding-box - fundalul este afișat strict în cadrul blocului;
• frontieră-box - imaginea se află sub cadru;
• conținut-box - imaginea de fundal apare numai în interiorul conținutului.

Exemplu de utilizare:

corp {background-clip: content-box-}.

Chrome și Safari necesită utilizarea prefixului -webkit.

Atribuiile de opacitate și filtru

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

.bloc {imagine-imagine: url (img.jpg) - opacitate: .3-}.

Pentru a seta transparența fundalului, a cărui CSS este potrivită chiar și pentru IE sub a noua versiune, utilizați atributul filter:

.bloc {background-image: url (img.jpg) - filtru: alfa (opacitate = 30) -}.

În acest caz, valoarea de opacitate este setată între 0 și 100. Rețineți că opacitatea atribuie diferite setări de transparență prin moștenire RGBA: atunci când se utilizează opacitatea devine clar nu numai fundalul, dar, de asemenea, toate elementele din interiorul unității.

Respectați întotdeauna statisticile de utilizare a browserelor în CSI și în toate celelalte țări. Cea mai mare problemă pentru toți producătorii de layout-uri este versiunea veche a IE, care nu vă permit să utilizați CSS3 la maxim. Când faceți aspectul, nu uitați să utilizați servicii speciale care verifică dacă browserul dvs. acceptă orice proprietate CSS. Dacă nu puteți instala versiuni mai vechi ale browserelor, găsiți un serviciu care va testa funcționarea site-ului în diferite browsere online.