Odată cu apariția de muncă CSS3 DTP în multe feluri, a devenit mai ușor și mai logic: la urma urmei, puteți face acum pentru a configura un obiect flexibil, mai rar a recurge la JavaScript.Să presupunem că aveți nevoie pentru a ajusta transparența fundal - CSS oferă imediat mai multe opțiuni.
fundal definit de un set de atribute (background-image, background-position, fundal de dimensiuni, de fundal repeta, fundal de atașare, fundal de origine, fundal clip, fundal), fiecare dintre care poate fi prescris singur sausă se unească sub același fundal atribut.Să examinăm fiecare dintre aceste în detaliu.
atribuie fundal
În CSS, culoarea de fundal poate fi setat in mai multe moduri: folosind codul hexazecimal, numele de culoare RGB sau-intrare.În CSS3 a devenit posibil să se utilizeze în loc de opțiune RGB de inregistrare cu RGBA.
cod de culoare hex este scris în proprietatea după zăbrele: background-color: # FFDAB9.În cazul în care caracterele din perechi potrivi o astfel de înregistrare, codul este de obicei un pic mai tăiat: # ccff00 poate fi scris ca # cf0:
corp {background-color: # cf0;}.
nume acolo, chiar și în culorile cele mai exotice.De exemplu, în plus față de roșu și alb standard de, puteți utiliza NavajoWhite (#FFDEAD) sau Honeydew2 (# E0EEE0):
corp {background-color: violet;}.
ultima opțiune RGB sau înregistrare RGBA vă permite să specificați, nu numai culoarea, ci și transparența CSS fundal, dar modul de a lucra în IE 9 versiunile mai vechi numai.Alte browsere recunosc varianta normală, cu transparență.Conform standardelor W3C este preferabil să se utilizeze toate același RGBA loc de mai RGB obișnuit.
ultima valoare la RGBA stabilește opacitatea fundal și de la 0 (transparent) la 1 (opac).
Există unele valori neobisnuite.Culoarea de fundal poate fi specificat folosind HSL și HSLA.Ambele au fost adăugate în CSS3, și, prin urmare, nu este susținută de IE versiunea 9 sau mai mare.Opțiunile sunt identice cu RGB sau RGBA, doar într-un format diferit: Hue (nuanță - valoarea pe paleta de culori, este dat în grade), saturează (saturație - intensitatea culorii detinute, la 0 la 100), Lightness (luminozitate - luminozitate, măsurată în mod similar parametrul saturează).
atribut background-image
mai versiune cross-browser a unui fundal transparent - este utilizarea imaginii.In CSS3, puteți specifica mai multe imagini, acest lucru se face printr-o virgulă.Exemplu:
corp {background-image: url (bg1.png), url (bg2.png)}.
susține acest lucru chiar IE8.Mai multe imagini ca fundal utilizat în structura de cauciuc.Foarte important, nu uita de a utiliza orice imagine ca stabilit în culoarea de fundal CSS, pentru că utilizatorii pot încărca pur și simplu o imagine.
atribut background-position
Dacă utilizați o imagine pentru a defini blocul fundal, CSS vă permite să poziționați imaginea oriunde pe ecran.În mod implicit, imaginea se află în colțul din stânga sus.Atribut accepta instrucțiuni verbale (sus, jos, stânga, dreapta), sau numeric (dobânzi, pixeli și alte unități).Este necesar să se specifice cele două valori de orizontală și verticală: corp
{background-position: centru-dreapta;} - în acest exemplu, fundalul va fi situat pe partea dreapta a paginii, cu partea de sus și de jos a distanței imaginii sunt aceleași.
atribut background-size
Uneori ai nevoie pentru a utiliza CSS pentru a întinde fundal sau a reduce dimensiunea sa.În acest scop, atributul background-size, iar dimensiunea poate fi definit ca pixeli de fundal sau procent, sau în orice altă unitate de măsură.
Cu acest atribut, există unele probleme: pentru afișarea corectă a unui fundal in browsere mai vechi, trebuie să utilizați un prefix.Desigur, versiunile curente sprijine pe deplin acest atribut și nevoia de proprietăți specifice a dispărut.
atribut background-atașare
Acest atribut specifica comportamentul imaginea de fundal atunci când defilare.De exemplu, se poate lua 3 valori (cu excepția moșteni, pentru totalul tuturor atributelor în acest articol):
- fix - face imaginea de pe fundalul fix;
- parcurgere - suluri de fundal cu restul elementelor;
- locale - imaginea de pe fundal este derulat dacă defilare este de conținut.Fundal, care merge dincolo de conținutul este fixat.
Exemplu de utilizare:
corp {background-atașare fix}.
prezent, Firefox nu acceptă cele mai recente proprietatea (local).
atribut background-origine
Acest atribut este responsabil pentru poziționarea elementului.Versiunile anterioare browsere necesită utilizarea de prefixe.Proprietatea în sine are trei parametri:
- pozitiile padding-box de la marginea fundal, luând în considerare grosimea cadrului;
- proprietăți de frontieră-box diferite de cel anterior prin faptul că linia de graniță poate fi complet sau parțial fundal acoperă;
- imagine de poziționare de conținut-box pryavyazyvaya conținutul său.
Dacă specificați mai multe valori, browser-ul poate reacționa în felul lor: Firefox și Opera accepta doar prima opțiune.
atribut background-repeat
Ca o regulă, în cazul în care imaginea de fundal este specificat, acesta trebuie repetat orizontal sau vertical.Pentru aceasta și a folosit atributul background-repeat.Astfel, fundal bloc, CSS, care conține o astfel de proprietate poate avea una din mai multe optiuni:
- nu-repeta - imagine apare pe pagina într-o singură formă;
- repetate - model repetat în x și y;
- repeta-X - numai pe orizontală;
- repeta-y - doar vertical;
- spațiu - model repetă, dar dacă spațiul este Nu este completat, atunci există goluri între imagini; runda
- - imaginea este redimensionată, în cazul în care nu umple întregul întreaga imagine zonă.
Exemplu de atribut:
corp {background-repeat: no-repeat repeta} - în mod similar background-repeat: repeta-y.
În CSS3 poate specifica valori pentru mai multe imagini în cazul în care parametrii de transfer separate prin virgule.
atribut background-clip
Acest atribut specifica comportamentul fundal în limitele (de exemplu, în cazul cadrelor punctate):
- padding-box - fundal afișată în interiorul blocului;
- border-box - intră în domeniul de aplicare a imaginii;
- conținut-box - imaginea de pe fundal apare numai în conținutul.
Exemplu de utilizare:
corp {background-clip: conținut-box;}.
Chrom și Safari necesită utilizarea -webkit- prefix.
atribut opacitate și se filtrează
atribut opacitate vă permite să setați transparența fundal - proprietate CSS va lucra în toate browserele.Valoarea este reglabil 0.0-1.0 inclusiv.Cu aceasta puteți seta transparența CSS fundal fără o valoare întreagă în loc de 0,3 este suficient pentru a scrie 0.3:
.block {background-image: url (img.png);opacitate: 0.3;}.
Pentru a seta transparența fundal, CSS este potrivit chiar și pentru IE de mai jos nouă versiune, utilizați filtrul atribut:
.block {background-image: url (img.png);filtru: alpha (opacitatea = 30);}.
În acest caz, opacitatea este situat între 0 și 100. Rețineți că opacitatea atribui diferite setări de transparență prin RGBA ereditate: opacitate cu ajutorul unui fundal transparent nu este numai, dar, de asemenea toate elementele din interiorul aparatului.
întotdeauna asigurați-vă că statisticile de utilizare browser ale CSI, precum și toate celelalte țări.Cea mai mare problema a tuturor DTP - versiunile mai vechi ale IE, acestea nu permit utilizarea deplină a CSS3.În cazul în care aspectul nu uitați să utilizați serviciile speciale care verifică dacă browser-ul dvs. este un CSS proprietate.Dacă nu se poate instala versiuni mai vechi de browsere, veți obține serviciul pe care verifică funcționarea site-ului în diferite browsere on-line.
