Cum de a face un fundal transparent în css
Bună ziua dragi cititori!
În acest articol, aș dori să vorbesc cu tine despre aceste efecte destul de interesante ca transparența pentru diferitele elemente ale site-ului, ci mai degrabă, cum să se stabilească cu transparență CSS fundal sau orice altă unitate de pe pagina site-ului.
Navigarea articol:
Ca bază pentru site-ul dvs., întotdeauna doriți să-l design interesant și individual face. Există o serie de efecte speciale, metode de operare și diverse trucuri pe care le puteți utiliza pentru a realiza designul dorit. Astfel, în special, folosind caracteristici CSS3 pot obține rezultate cu adevărat impresionante.
Datorită transparenței CSS fundal poate fi realizat prin cele două moduri cele mai simple:
- 1. Folosiți opacitate CSS-proprietate.
- 2. Utilizarea formatului RGBA pentru a seta fundal.
Folosind o proprietate css-opacitate
Opacitatea este un instrument versatil, și vă puteți seta nivelul dorit de transparență în css pentru orice element pe pagină, și pentru fundal.
proprietăți de sintaxă Css:
în cazul în care valoarea este în intervalul de la 0.0 (elementul este complet transparent) la 1.0 (elementul total transparent).
Deci, de exemplu, face un bloc cu clasa fon. și cere pentru ea, pentru claritate, imaginea de fundal. Această unitate va plasa două blocuri cu textul și opas2 opas1. pentru care definim fundal negru. Apoi, pentru al doilea bloc de stocare opacitatea valorilor egală cu 0,3.
Iată ce se întâmplă:
Bloc fără transparență
Demonstrarea opacitate proprietăți css
După cum puteți vedea, css de lucru de proprietate, unitatea cu opas2 de clasă a devenit transparent și prin el discerne imaginea de fundal.
Dar există un moment neplăcut. După cum puteți vedea, textul este stins, ceea ce înseamnă că a devenit clar prea. Acest lucru sa întâmplat datorită faptului că toate elementele copil ale blocului, în cazul nostru - textul, transparența moștenită definită în css.
Se pare că css-proprietate putem folosi pentru a da un bloc transparent pe pagina numai în cazul în care conține niciun text.
Și ce să facem dacă vrem să specificați în fundal transparența css pentru unitate, dar păstrează lizibilitatea textului conținut în ea?
Sarcina de fundal în RGBA
Evita această problemă, putem în acest caz, dacă vom renunța la utilizarea de opacitate și specificați o valoare pentru css-proprietăți de fond în format RGBA.
Formatul RGBA ne oferă posibilitatea de a seta culoarea folosind culorile roșu, verde și albastru, precum și o zecimală, precum și, vă permite să setați transparența prin utilizarea unui canal alfa. Nivelul alfa este stabilit în intervalul de la 0 la 1. Aceasta este, la fel ca și în opacitatea css-proprietate.
Ca aceasta:
fundal: RGBA (255,255,255,0.6);
Pentru claritate, se adaugă un bloc în fundal este un alt element text, pentru care precizam în formatul RGBA de fundal css cu 0,3 nivel de transparență.
Asta e ceea ce avem:
Bloc fără transparență
Demonstrarea proprietății css-opacitate
Aici este RGBA de fundal