#principal (poziție: relativă; ) #principal:după ( conținut: ""; afișare: bloc; poziție: absolut; sus: 0; stânga: 0; imagine de fundal: url(/wp-content/uploads/2010/11 /tandem.jpg); lățime: 100%;

Crearea unui fundal transparent în HTML și CSS (opacitate și efecte RGBA)

Efect translucid elementul este clar vizibil în imaginea de fundal și a devenit larg răspândit în diferite sisteme de operare, deoarece arată elegant și frumos. Principalul lucru este să nu aveți un model monocromatic sub blocurile translucide, ci o imagine, în acest caz, transparența devine vizibilă.

Acest efect este obținut într-o varietate de moduri, inclusiv metode de modă veche, cum ar fi utilizarea unei imagini PNG ca fundal, crearea unei imagini în carouri și proprietatea opacității. Dar de îndată ce apare nevoia de a face un fundal translucid într-un bloc, aceste metode au dezavantaje neplăcute.

Să ne uităm la transluciditatea textului și a fundalului - cum să o folosiți corect în designul site-ului web:

Caracteristica principală a acestei proprietăți este că valoarea transparenței afectează toate elementele copil din ea, nu doar fundalul. Aceasta înseamnă că atât fundalul, cât și textul vor deveni translucide. Puteți crește nivelul de transparență prin schimbarea comenzii de opacitate de la 0,1 la 1.

HTML 5 CSS 3 IE 9

În designul web, se folosește și transparența parțială și se realizează prin formatul de culoare RGBA, care este setat doar pentru fundalul elementului.

De obicei, într-un design, doar fundalul elementului ar trebui să fie translucid, iar textul ar trebui să fie opac pentru a menține lizibilitatea. Proprietatea opacitate nu este potrivită aici deoarece textul din interiorul elementului va fi, de asemenea, parțial transparent. Cel mai bine este să utilizați formatul RGBA, care are un canal alfa, sau cu alte cuvinte, o valoare de transparență, ca parte a acestuia. Valoarea este scrisă rgba, apoi valorile componentelor de culoare roșu, albastru și verde sunt enumerate în paranteze, separate prin virgule. Ultima este transparența, care este setată de la 0 la 1, cu 0 însemnând transparență completă și 1 opacitate de culoare - sintaxa pentru utilizarea rgba.

Fundal translucid HTML 5 CSS 3 IE 9

Salutare tuturor. După cum probabil știți, fundalul este o proprietate CSS care vă permite să setați o culoare de fundal sau să încărcați o imagine pentru a acționa ca fundal. CSS3 a introdus și capacitatea de a crea gradienți liniari și radiali, dar acesta este un subiect pentru un alt articol. În aceasta, am vrut să vă spun cum să setați transparența pentru proprietatea de fundal în CSS.

Setați transparența pentru fundal CSS

Deci, toate acestea se realizează foarte simplu datorită unui format de înregistrare color precum rgba. Dacă lucrați cu editori grafici, atunci probabil știți că modul de culoare rgb înseamnă: proporția de roșu (roșu), proporția de verde (verde) și albastru (albastru). Deci, rgba este practic același, se mai adaugă un singur parametru - transparența. Este scris astfel:

Culoare de fundal: rgba(173, 57, 22, 0,5)

Mai întâi indicăm în mod explicit că setăm culoarea în modul rgba. Apoi indicăm valorile de saturație ale celor trei culori primare de la 0 la 255, unde 255 este cea mai mare saturație. Al patrulea parametru este transparența noastră. Valoarea de la 0 la unu este scrisă aici. 1 este un element complet opac, iar 0 este un element complet transparent. În consecință, dacă îl setați la 0, atunci culoarea de fundal nu va fi vizibilă deloc.

Acum știți cum să setați proprietatea de fundal la transparență în CSS. Pentru a face acest lucru, trebuie să utilizați modul de culoare rgba. Există, de asemenea, o proprietate de opacitate, dar se aplică întregului element ca întreg. Adică, atunci când se aplică opacitatea, transparența poate fi aplicată textului, făcându-l ilizibil.

Exemplu de fundal transparent

Avantajele unui fundal translucid sunt ușor de arătat cu un exemplu. De exemplu, avem un fundal general al paginii. Iată cum ar arăta blocul dacă i s-ar oferi o culoare neagră solidă:

Acum să setăm aceeași culoare neagră pentru bloc, dar să o specificăm folosind formatul de culoare rgba, specificând ultima valoare ca 0,7, de exemplu. Se va dovedi astfel:
Acum fundalul blocului este vizibil prin el și imaginea de fundal este vizibilă prin el. Această imagine și fundalul sunt doar de exemplu. După cum vă puteți imagina, transparența de fundal în CSS poate fi utilă atunci când doriți ca fundalul unui element imbricat să se arate fără a ascunde alte fundaluri situate pe alte straturi.

Setarea culorii în sine folosind rgba nu este dificilă. După cum am menționat deja, primele trei litere înseamnă cele trei culori primare: roșu, verde și albastru, sau mai degrabă cota lor (de la 0 la 255). Prin setarea unor valori diferite, puteți obține milioane de culori diferite, iar transluciditatea vă va permite să veniți cu efecte mult mai frumoase pentru site, dacă este necesar.

Proprietatea CSS RGBa vă permite să setați o culoare de fundal cu un canal alfa (adică să umpleți blocurile cu o culoare semi-transparentă).

Desigur, CSS are o proprietate de opacitate, dar principalul său dezavantaj este că toate elementele copil din interiorul unui bloc transparent își vor moșteni și opacitatea.

Cel mai adesea, folosesc PNG24 de un pixel pentru a umple fundalul unui element și pentru a fixa transparența în IE6 sau pentru a face fundalul transparent folosind opacitatea css. Textul este poziționat separat într-un alt element, dar acest lucru, după părerea mea, nu este în totalitate convenabil...

Prin folosirea RGBa solutia arata cam asa:

1. Să presupunem că avem nevoie de un fundal albastru cu 50% transparență.

Dar IE6–8, Opera 9.x, Mozilla Firefox 2.x nu îl vor accepta

2. Pentru IE, puteți încerca să o faceți mai elegant:

Nota: Culoarea din filtru este specificată de 8 numere. Primele 2 numere sunt gradul de transparență: FF - complet opac, 00 - transparent. Următoarele 6 numere sunt desemnarea obișnuită a culorii HTML.

Utilizarea RGBa nu se limitează doar la culoarea de fundal a blocurilor...

Astăzi vreau să vorbesc despre fundalul transparent al unui bloc de text, cum să-l faci și ce oferă CSS3 pentru asta. Înainte de a trece la rgba și hsla, să ne uităm la exemple de utilizare a unui fundal translucid pentru un bloc cu text sau, mai degrabă, cum se realizează acest lucru și ce probleme apar. Pentru demonstrație, vom folosi această imagine, procesată de un program în Java, și linkul către care, din păcate, s-a pierdut cu mult timp în urmă.

Uită-te la poza de mai jos. Există un fundal grafic pe care doriți să suprapuneți un bloc translucid cu text. In mod ideal ar trebui sa fie ceea ce este numerotat 2 in poza, dar uneori poate aparea ce este numerotat cu 3 Mai este un defect, dar il voi mentiona verbal putin mai jos, pentru ca Nu a existat nicio modalitate de a face o captură de ecran.

Fundal translucid fără rgba și hsla

1. PNG translucid . Cea mai bună opțiune, pentru că Astăzi este cel mai multi-browser și cel mai ușor. Pentru ca blocul să fie transparent, este necesar un PNG translucid de un pixel, care este setat ca fundal al blocului. Asta e tot.
   
   Defecte: Este necesar doar unul.
2. Transparență prin opacitate . Transparența blocurilor este setată între browsere, după cum urmează:

   opacitate: 0,5;
   filtru:alfa(opacitate=50);
   -moz-opacitate:0,5;

   unde 0,5 și 50 reprezintă 50% transparență. Dar există o problemă. Dacă dăm blocului de care avem nevoie de o astfel de transluciditate, atunci vom vedea a treia opțiune în imaginea de mai sus - și conținutul blocului va deveni translucid. Cu toate acestea, există o cale de ieșire - poziționare liberă, cu ajutorul căreia este plasat un alt bloc sub blocul de text, căruia i se oferă transluciditate.

   Să ne uităm la un exemplu. Lăsați blocul cu o imagine portocalie să fie eticheta body, un container care conține atât text, cât și un fundal transparent - #block_bg, în interiorul căruia se află un bloc cu un fundal translucid #block_transparent și un bloc cu text - #block_text.

   
   

   
   

   Text text text, o mulțime de text

   
   

   body ( fundal: url(image.jpg); )
   #block_bg (
   poziție: relativă;
   preaplin: ascuns;
   latime: 400px;
   umplutură: 10px;
   }
   #block_text ( poziție: relativ; z-index: 100; )
   #block_transparent (
   opacitate: 0,5;
   filtru: alfa(opacitate=50);
   -moz-opacitate: 0,5;
   fundal: #fff;
   poziție: absolută;
   sus: 0;
   stânga: 0;
   indicele z: 90;
   inaltime: 5000px;
   latime: 400px;
   }

   Vă rugăm să rețineți că este necesar să setați lățimea blocului transparent (linia 19), altfel se va restrânge în 1 pixel și lățimea blocului general (linia 5), ​​altfel textul se va extinde dincolo de blocul transparent (deși lățimea poate fi setată pentru text, dar nu există nicio diferență fundamentală). Pentru a avea indentări din text și marginea blocului transparent, folosim padding în a șasea linie. Pentru ca transparența să fie reglabilă pe înălțime, îi dăm o înălțime mai mare (linia 18) și o suprapunere pentru blocul general (linia 4).
   Deci, punem totul într-un singur bloc, care poate fi împins în orice parte a paginii unde există un fundal interesant. Da, poate doriți să puneți un fundal pe blocul general block_bg, dar este mai bine să nu o faceți - vă veți face viața mai dificilă (în funcție, desigur, de sarcină). Cu alte cuvinte, este mai bine să împingeți întreaga structură într-un bloc separat, căruia i se poate da umplutură și nu trebuie să vă faceți griji.
   Defecte: Prea greoaie.

rgb și hsl, rgba și hsla – proprietăți CSS3

Mai precis, acestea nu sunt tocmai proprietăți - aceasta este o nouă capacitate de a seta culori pentru proprietăți precum fundal, culoare, chenar etc.

Denumirile proprietăților provin de la sistemele de culoare RGB (Roșu, Verde, Albastru) și de la HSL (Nuanță, Saturație, Luminozitate). Primul sistem descrie spațiul de culoare prin amestecarea culorilor primare - roșu, verde și albastru. În cel de-al doilea sistem, componentele de culoare afișează informații despre culoare într-o formă mai familiară oamenilor: ce culoare este aceasta? Cât de saturat este? Cât de lumină sau întuneric este?

rgb și rgba

Să începem cu rgb și rgba. Valorile lui r, g, b pot fi setate de la 0 la 255 sau de la 0% la 100%. Valoarea unui (alfa, transparență) este măsurată de la 0 la 1 (valorile fracționale sunt specificate printr-un punct - 0,4, 0,7 etc.). Dacă r, g și b sunt setate la valori mai mari decât intervalul lor acceptabil (de exemplu, 300 sau 110% sau -5), acestea se vor micșora la cea mai apropiată valoare acceptabilă.

Să ne uităm la totul folosind proprietatea de fundal ca exemplu (deși cei care doresc pot lua culoare sau chenar).

fundal: rgb(0, 0, 255); /*culoare albastru pur*/
fundal: rgb(100%, 50%, 0%); /*culoare albastru pur*/
fundal: rgb(10, 145, 500); /*va fi recunoscut ca 10, 145, 255*/
fundal: rgba(10, 145, 255, 1); /*la fel ca cel precedent*/
fundal: rgba(100, 50, 255, 0,1); /*nuanță foarte transparentă de liliac*/

Da, am uitat să spun că nu poți pune un spațiu între proprietate și paranteza de deschidere și nu poți seta unele valori în numere obișnuite și altele în procente pe aceeași linie. Dacă faci asta, nimic nu va funcționa.

hsl și hsla

Și câteva cuvinte despre hsl și hsla. Valoarea lui a este setată în același mod ca și pentru rgb și rgba, dar cu primii trei parametri lucrurile sunt puțin diferite. h poate fi setat de la 0 la 360, iar s și l pot fi setate de la 0% la 100%.

Și cel mai important. Dacă în RGB este foarte greu să determinați culoarea din cap (aproape întotdeauna aveți nevoie de un program terță parte cu pipetă), atunci aici este suficient să aveți o singură poză în fața ochilor pentru ca totul să cadă la loc. Imaginea arată nuanțele parametrului h.

Pentru a estima culoarea necesară, selectați o nuanță, apoi estimați s, saturația culorii (unde 0% este o culoare nesaturată (ton de gri) și 100% este cea mai saturată) și luminozitatea acesteia (0% - cu ea, culoarea va fi întotdeauna fie negru, iar cu 100% - alb). Pe baza celor de mai sus, imaginea arată tonurile luminoase la 100% saturație și 50% luminozitate.

Acum, întregul spațiu de culoare este în capul tău dintr-o privire. Desigur, selecția manuală nu înlocuiește o pipetă și nu toată lumea trebuie să aibă un „spațiu de culoare” în cap, dar uneori, pentru a-și da seama rapid de ce este nevoie și pentru a-l testa, este potrivit.

Și literalmente câteva exemple

fundal: hsl(180, 100%, 50%); /*culoare albastru bogat*/
fundal: hsla(140, 50%, 30%, 0,5); /*nuanță de verde translucidă, abia vizibilă*/

Defecte: Toate cele 4 proprietăți nu sunt acceptate de browserele donkey și mai vechi.

Finalizare

În general, CSS3 oferă câteva lucruri foarte utile, dar, ca întotdeauna, IE este principala frână a progresului. Pentru site-urile clienți m-aș abține deocamdată să-l folosesc (îmi vor irosi creierul degeaba) și aș lua opțiunea cu PNG. Și pe site-ul tău - de ce nu. Mai ales dacă este vizitat de oameni avansați care nu stau pe măgari sau orice fragmente de antichitate.