CSS fundal transparență. fundal transparent sau text cu CSS

Odată cu apariția de designeri web CSS3 lucra în mai multe moduri a devenit mai ușor și mai logic: la urma urmei, acum puteți personaliza într-adevăr flexibil orice obiect, mai puțin frecvent recurge la JavaScript. Să presupunem că aveți nevoie pentru a ajusta transparența fundalului - CSS oferă imediat mai multe opțiuni.

Context definit de un set de atribute (background-imagine, fundal poziție , fundal dimensiuni, fundal repetate, fundal de atașament, fundal origine, fundal clip, fundal), fiecare dintre acestea pot fi atribuite separat sau combinate sub atributul fundal. Să examinăm fiecare dintre ele în detaliu.

Caracteristica culoare de fundal

În CSS, culoarea de fundal poate fi setat în mai multe moduri: folosind un cod hex, nume de culoare sau RGB-intrare. În CSS3 a devenit posibil să se utilizeze în loc de opțiunea RGB-înregistrare cu RGBA.

Hex cod de culoare este înregistrată în proprietate după zăbrele: background-color: # FFDAB9. În cazul în care caracterele din această intrare sunt aceleași perechi, codul este, de obicei, un pic tăiat: # ccff00 poate fi scris ca # cf0:

body {background-color: # cf0 ;}.

Numele este, chiar și în cele mai exotice culori. De exemplu, în plus față de standard, roșu și alb, puteți utiliza NavajoWhite (#FFDEAD) sau Honeydew2 (# E0EEE0):

body {background-color: violet; }.

Această din urmă opțiune este RGB sau intrarea RGBA vă permite să specificați nu numai culoarea, ci și transparența fundal CSS, dar metoda funcționează numai în versiunile IE mai vechi de 9. Alte browsere recunosc versiunea normală cu transparență. În conformitate cu standardele W3C este preferabil să se utilizeze în continuare RGBA în loc de mai RGB de obicei.

Ultima valoare în RGBA fundal și setează opacitatea de la 0 (transparent) la 1 (opac).

Există unele valori neobișnuite. Culoarea de fundal poate fi setat folosind HSL și HSLA. Ambele au fost adăugate la CSS3 și, prin urmare, nu sunt susținute de versiunea IE 9 sau mai mare. 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 background-image

Cea mai versiune de browser a fundalului transparent - aceasta este utilizarea imaginii. În CSS3, puteți seta mai multe imagini, acest lucru se face printr-o virgulă. exemplu:

{Background image-corp: url (bg1.png), url (bg2.png)}.

Acest mod de a sprijini chiar IE8. Mai multe imagini în fundal a cauciucului utilizat în structura. Foarte important, nu uitați să utilizați orice imagine și setați culoarea de fundal în CSS, deoarece utilizatorii pot încărca pur și simplu o imagine.

Atributul background-position

Dacă utilizați imaginea pentru a seta unitatea de fond, CSS vă permite să poziționați imaginea oriunde pe ecran. În mod implicit, imaginea este situată în colțul din stânga sus. Atribut ia fie instrucțiuni verbale (sus, jos, stânga, dreapta), un numeric (interes, pixeli și alte unități). În acest caz, trebuie să specificați două valori, orizontale și verticale:

body {background-position: centru - dreapta ;} - în acest exemplu, modelul va fi amplasat pe partea dreaptă a paginii, în partea de sus și de jos a distanței imaginii la fel.

Atributul background-size

Uneori este necesar sa se intinda fundalul CSS sau a reduce dimensiunea sa. Pentru a face acest lucru, utilizați fundal dimensiunea atribut, iar dimensiunea fundal poate fi setat în pixeli sau procente, precum și orice alte unități.

Cu acest atribut, există unele probleme: pentru afișarea corectă a unui fond în versiunile anterioare ale prefixele browser-ul care urmează să fie utilizate. Desigur, versiunea curentă sprijină pe deplin acest atribut și nevoia de proprietăți specifice au dispărut.

Atributul background-attachment

Acest atribut specifica comportamentul imaginilor de fundal în timpul derulării. Deci, se poate lua 3 valori (care nu includ moștenesc, totalul pentru toate atributele discutate în acest articol):

• fixe - face ca imaginea de pe fundalul fix;
• derulați - suluri de fundal cu restul elementelor;
• locală - imaginea de pe fundal este defilat în cazul în care derularea are un conținut. Context care merge dincolo de conținutul cadrului este fixat.

Exemplu de utilizare:

body {background-atașament fix}.

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

Atributul background-origine

Acest atribut este responsabil pentru elementul de poziționare. browsere timpurii necesită utilizarea de prefixe. Proprietatea în sine are trei parametri:

• padding-box este poziționat în raport cu modelul de margine, ținând cont de grosimea cadrului;
• proprietăți border-box diferite de cele anterioare , în care linia de separație poate fi suprapune complet sau parțial modelul;
• conținut caseta de imagine de poziționare pryavyazyvaya conținutul său.

Dacă specificați mai multe valori, atunci browsere pot reacționa în felul lor: Firefox și Opera percepe doar prima opțiune.

Atributul background-repeat

De regulă, în cazul în care este specificat imaginea de fundal, trebuie repetat orizontal sau vertical. Pentru aceasta și a folosit atributul background-repeat. Astfel, blocul de fundal, CSS care conține o astfel de proprietate poate avea unul dintre mai mulți parametri:

• nu-repeta - imaginea apare pe o pagină într - o singură versiune;
• repeta - fundal se repetă în x și y;
• repeat-x - numai pe orizontală;
• repeat-y - numai pe verticală;
• spațiu - fundal se repetă, dar dacă spațiul este imposibil să se completeze între imagini apar goale;
• rotund - imaginea este scalată, în cazul în care nu umple întreaga zonă de imagini întregi.

Exemplu de atribute:

body {background-repeat: no- repeta repetare} - similare background-repeat: repeat-y.

În CSS3 poate specifica valori pentru mai multe imagini atunci când parametrii de listare, separate prin virgulă.

Atributul background-clip

Acest atribut defineste comportarea fundalului sub limitele (de exemplu, în cazul ramelor punctate):

• padding-box - fundal afișată în interiorul blocului;
• frontieră-box - imaginea vine în conformitate cu cadrul;
• conținut-box - imaginea de pe fundal va apărea numai în cadrul conținutului.

Exemplu de utilizare:

body {background-clip: pe conținut cutie;}.

Chrom și Safari necesită prefixul -webkit-.

atributele opacității și filtru

atribut opacitate vă permite să setați transparența fundalului - proprietate 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 nici o valoare întreagă în loc de 0,3 este suficient pentru a scrie .3:

.block {background-image: url ( img.png); opacitate: .3;}.

Pentru a seta opacitatea de fundal, CSS este potrivit chiar si pentru IE sub versiunea nouă, utilizați atributul filtru:

.block {background-image: url ( img.png); Filtru: alpha (opacity = 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.

Monitorizați întotdeauna statisticile de utilizare pentru browserele CSI și toate celelalte țări. Cea mai mare problemă a tuturor DTP - versiunile mai vechi ale IE, ele nu vă permit să utilizați pe deplin măsura CSS3. În aspect nu uitați să utilizați serviciile speciale care verifică dacă browserul acceptă orice proprietate CSS. Dacă nu se poate instala versiuni mai vechi de browsere, găsiți un serviciu care va verifica activitatea site-ului în mai multe browsere on-line.