Opacitate în CSS este o proprietate care specifică controlul transparenței elementelor precum conţinut sau imagini . Folosind această proprietate, putem seta orice imagini să fie complet opace ( vizibil ), complet transparent ( ascuns ), sau translucid (parțial vizibil). Este nevoie de o valoare numerică cuprinsă între 0 și 1. Unde 0 definește complet transparent și 1 definește complet vizibil. Valorile opacității între 0 și 1, cum ar fi 0,2, 0,4, 0,6 etc., schimbă o imagine din transparentă în opac prin creșterea treptată a valorii zecimale.

Sintaxă

 opacity : 

Valoarea numerică trebuie să fie între 0 și 1 pentru ca imaginea să fie semitransparentă. Daca oferim 1, imaginea va fi opaca, daca valoarea numerica este 0, imaginea devine complet transparenta.

Exemplul 1 : În acest exemplu, vom folosi proprietatea opacitate pentru a face elementul transparent atunci când deplasăm mouse-ul peste element.

Main.html

 Simple example to display the Opacity .get { background: red; width: 300px; height: 250px; border: none; color: white; padding: 16px 32px; text-align: center; font-size: 16px; margin: 4px 2px; } .get:hover { // hover is used to show the impact on element when the mouse on the element. opacity: 0.5; // set the opacity value to 0.5 } // use of class in CSS. 

Ieșire

Treceți cu mouse-ul peste caseta roșie pentru a afișa un efect transparent sau de opacitate.

Opacitatea tranziției în CSS

În CSS, a opacitatea tranziției este o proprietate folosită pentru a schimba fără probleme starea de opacitate de la un nivel la altul. Înseamnă că opacitatea tranziției schimbă starea elementului opac în transparent cu o durată de timp definită. Tranziția are patru proprietăți: proprietăți-tranziție, durată-tranziție, funcție de sincronizare-tranziție și întârziere-tranziție, utilizate pentru a efectua efectul de opacitate asupra unei imagini. The durata tranziției este o proprietate importantă pentru modificări treptate sau bruște care reflectă efectul de opacitate asupra unui element pe o durată de timp definită în milisecunde sau secunde.

Proprietatea scurtă a tranziției este următoarea:

 transition: [transition - property] [transition -duration] [transition -timing -function] [transition - delay]; 

Sintaxă pentru a defini opacitatea tranziției în CSS

 { transition: opacity 5s; opacity: 1; // set opacity property to 1, completely visible } Or { transition: opacity 0.3s linear 2s; // effect on 0.3 millisecond } 

Proprietatea de tranziție

Următoarele sunt proprietățile de tranziție utilizate pentru a controla efectele de tranziție.

Notă: În timp ce setăm proprietatea de tranziție la imagine sau conținut, trebuie să definim proprietatea tranziție-durată; în caz contrar, durata devine 0 și nu va afișa niciun efect.

Necesitatea opacității tranziției în CSS

The opacitate este o proprietate CSS simplă folosită pentru a controla transparența unei imagini prin setarea intervalului de opacitate de la 0 la 1. Reflectă schimbarea statică sau bruscă a unui element pentru a arăta efectul de opacitate. De exemplu, dacă vrem să afișăm o imagine ca transparentă, trebuie să setăm valoarea opacității de la 0 la 1. După aceea, arată efectul de opacitate imediat, în loc să dureze ceva timp. Prin urmare, folosim a opacitatea tranziției în CSS care controlează transparența unui element pe o perioadă de timp definită. Folosind funcția de tranziție-timp-în opacitatea tranziției, putem determina curba de viteză a unui element care specifică efectul de opacitate rapidă asupra unei imagini. În acest fel, folosim efectul de opacitate a tranziției pentru a reflecta modificările din perioada de timp specificată, în loc să apară imediat.

Exemplul 2: În acest exemplu, vom folosi proprietatea de opacitate de tranziție care reflectă efectul de opacitate într-o durată de timp specificată în loc de imediat.

Fișier1.html

 CSS transition opacity Property .pr{ width: 400px; height: 300px; background: lightgreen; position: relative; } .cr{ width: 270px; height: 200px; position: absolute; /* top: 30px; */ left: 30px; color: white; margin: 40px auto; margin-bottom: 30px; font-family: Arial, Helvetica, sans-serif; background: red; font-weight: Bold; font-size: 36px; opacity: 0; } .cr:hover { opacity: 1; transition: opacity 2s ease-out; /* It slowly shows the element as we place the mouse on the box and when the time reaches 2 seconds, it is fully visible. */ -webkit-transition: opacity 2s ease-out; -moz-transition: opacity 2s ease-in-out; } JavaTpoint: Best Tutorial Site Check link is working <br> <p>  https://www.javatpoint.com/  </p> 

Ieșire