Acest articol vă va prezenta conceptul care vă va ajuta să înțelegeți opacitatea și vă spune cum să controlați acest parametru. Următoarele indicații vor fi tratate în acest articol,
- Opacitate în CSS
- Opacitatea moștenită cu elemente în cascadă
- Setarea atributului RGBA pentru elementele în cascadă
- Opacitatea se modifică asupra efectului de plutire
Opacitatea de fundal a unui element este o setare de caracteristică utilă în proiectarea HTML. Prin setarea nivelului de opacitate (inversul transparenței), un proiectant poate controla vizibilitatea elementului prin proprietatea de opacitate CSS. Aceasta este, în general, utilizată ca setare de fundal atunci când există elemente în cascadă, plasate unul deasupra celuilalt.
implementarea unei cozi prioritare în java
Cel mai frecvent scenariu în care este utilizată această caracteristică este acesta:
- O imagine de fundal parțial transparentă este plasată în spatele unui element de text.
- Imaginea de fundal este vizibilă, astfel încât nu domină textul din față.
- Imaginea se poate focaliza pe deplin atunci când utilizatorul alege în mod explicit să o vadă.
S-ar putea să doriți să citiți pe înainte de a învăța despre opacitatea CSS.
Pentru un tutorial CSS cuprinzător, vizitați Edureka CSS Tutorial pentru începători . Veți obține un heads-up excelent pe modul în care CSS va fi utilizat pentru a spori designul web HTML.
Continuăm cu acest articol despre Opacitate în CSS
Opacitate în CSS
În CSS, Opacitatea este setată ca o valoare numerică cuprinsă între 0,0 - 1,0. Valorile mai aproape de zero reprezintă mai multă transparență, imaginea va fi foarte ușoară în vizibilitate. Să începem cu un exemplu de imagine care este afișată cu 50% transparență. A se vedea exemplul 1 de mai jos.
Exemplul 1: Imagine de fundal setată la semi- transparenţă
img {opacitate: 0.5 filtru: alfa (opacitate = 50) / * Pentru IE8 și versiuni anterioare * /} 
Exemplul 1: ieșire
Imagine originală (100% opacitate)
Imagine cu setare 50% Opacitate
În exemplul de mai sus, exista doar un singur element - o imagine. Alte elemente pot fi, de asemenea, setate cu parametrul de opacitate, cum ar fi text, elemente div și așa mai departe.
Continuăm cu acest articol despre Opacitate în CSS
Opacitatea moștenită cu elemente în cascadă
Când elementele sunt stivuite unul peste altul, dacă elementul de fundal are setarea opacității, atunci acesta este moștenit de toate elementele copil. Acesta este setare implicită . Asta înseamnă că dacă o casetă de text este plasată deasupra unei imagini și imaginea are o setare de opacitate de 0,5, atunci atât imaginea cât și elementul de text vor fi vizibile doar parțial.
Să luăm exemplul unui element de text copil plasat deasupra imaginii TOM & JERRY în următorul nostru exemplu. Putem vedea efectul implicit de opacitate în Exemplul 2.
.container {position: relative text-align: center opacity: 0.5} .centered {position: absolute top: 50% left: 50% transform: translate (-50%, -50%) color: blue font-size: 40px} } TOM & JERRYExemplul 2: Textul moștenește opacitatea din imaginea părinte
Continuăm cu acest articol despre Opacitate în CSS
Setarea atributului RGBA pentru elementele în cascadă
Există un alt mod în care opacitatea poate fi controlată cu elemente în cascadă. Dacă doriți ca elementul copil să rămână neafectat de opacitatea elementului său de fundal, atunci îl puteți utiliza Setarea atributului RGBA .
Exemplul 3: Utilizarea setării RGBA
fundal: rgba (76, 175, 80, 1.0) / * Imaginea nu are setări de opacitate * / / * Fundal verde pentru text cu opacitate 100% * / / * Textul în albastru are 100% opacitate * /
cum se termină programul java
fundal: rgba (76, 175, 80, 0,4) / * Imaginea nu are setări de opacitate * / / * Fundal verde pentru text cu opacitate de 40% * / / * Text albastru încă văzut cu opacitate de 100% * /
După codul de culoare RGB, atributul „a” înseamnă alfa . alfa parametrul este un număr între 0,0 (complet transparent) și 1,0 (complet opac).
Continuăm cu acest articol despre Opacitate în CSS
Opacitatea se modifică asupra efectului de plutire
În unele scenarii, designerii web doresc ca opacitatea să varieze în funcție de faptul dacă utilizatorul se concentrează asupra elementului sau nu. De exemplu, să presupunem că o imagine este setată la 50% opacitate în mod prestabilit. Cu toate acestea, atunci când utilizatorul trece mouse-ul peste imagine, atunci vrem ca imaginea să se concentreze complet cu opacitate 100%.
Exemplul 4 arată cum se realizează acest lucru.
Puncte comune de remarcat:
- Setarea opacității este o alternativă la utilizarea atributului „vizibilitate” în CSS. Cu toate acestea, utilizarea setării de opacitate facilitează setarea diferitelor grade de transparență, de la zero la complet.
- Nivelul de opacitate trebuie stabilit după testarea atentă în diferite browsere. Când opacitatea este setată la valori mici, uneori textul sau imaginea pot deveni complet invizibile sau ilizibile.
- Ideea din spatele utilizării opacității este de a pune accentul pe unele elemente, în timp ce alte elemente de fundal nu distrag atenția utilizatorului. Deci, astfel de elemente de fundal sunt setate cu opacitate mai mică.
- În Internet Explorer, pentru IE8 și versiunile mai vechi, opacitatea este o setare de „filtru” cuprinsă între 1 și 100. În toate celelalte browsere, aceasta variază de la 0 la 1.
Acest lucru ne aduce la sfârșitul acestui articol despre Opacitate în CSS.
Dacă sunteți interesat să aflați mai multe despre dezvoltarea web, consultați de Edureka. Instruirea pentru certificarea dezvoltării web vă va ajuta să aflați cum să creați site-uri web impresionante folosind HTML5, CSS3, Twitter Bootstrap 3, jQuery și API-urile Google și să îl implementați în Amazon Simple Storage Service (S3).
Dacă sunteți încă interesat Dacă aveți vreo întrebare, ați putea să o postați în secțiunea de comentarii a acestui blog „Opacitate în CSS” și vă vom răspunde cât mai curând posibil.