Opacitat en CSS és una propietat que especifica controlar la transparència d'elements com ara contingut o imatges . Utilitzant aquesta propietat, podem configurar qualsevol imatge perquè sigui completament opaca ( visible ), totalment transparent ( amagat ), o translúcid (parcialment visible). Pren un valor numèric entre 0 i 1. On 0 defineix totalment transparent i 1 defineix completament visible. Els valors d'opacitat entre 0 i 1, com ara 0,2, 0,4, 0,6, etc., canvien una imatge de transparent a opaca augmentant gradualment el valor decimal.
Sintaxi
opacity :
El valor numèric ha d'estar entre 0 i 1 perquè la imatge sigui semitransparent. Si proporcionem 1, la imatge serà opaca, si el valor numèric és 0, la imatge esdevé completament transparent.
Exemple 1 : En aquest exemple, utilitzarem la propietat d'opacitat per fer transparent l'element en moure el ratolí per sobre de l'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. Sortida
Passeu el ratolí per sobre del quadre vermell per mostrar un efecte transparent o d'opacitat.
Opacitat de transició en CSS
En CSS, a opacitat de transició és una propietat utilitzada per canviar sense problemes l'estat d'opacitat d'un nivell a un altre estat. Significa que l'opacitat de la transició canvia l'estat de l'element opac a transparent amb una durada de temps definida. La transició té quatre propietats: propietat de transició, durada de la transició, funció de temporització de transició i retard de transició, que s'utilitzen per dur a terme l'efecte d'opacitat en una imatge. El transició-durada és una propietat important per als canvis graduals o sobtats que reflecteixen l'efecte d'opacitat d'un element durant una durada de temps definida en mil·lisegons o segons.
La propietat taquigràfica de la transició és la següent:
transition: [transition - property] [transition -duration] [transition -timing -function] [transition - delay];
Sintaxi per definir l'opacitat de la transició en 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 } Propietat de transició
A continuació es mostren les propietats de transició utilitzades per controlar els efectes de transició.
| Valor | Descripció |
|---|---|
| Transició-propietat | S'utilitza per definir el nom de la propietat CSS que mostra l'efecte de transició a les imatges. |
| Transició- durada | S'utilitza per definir el període de temps en segons o mil·lisegons per mostrar l'efecte de transició. |
| Funció de transició-temporització | S'utilitza per definir la corba de velocitat en una imatge per mostrar l'efecte de transició. |
| Transició - retard | Especifica si l'efecte de transició s'inicia a l'element o a la imatge. |
Nota: mentre establim la propietat de transició a la imatge o al contingut, hem de definir la propietat de transició-duració; en cas contrari, la durada esdevé 0 i no mostrarà cap efecte.
La necessitat d'opacitat de transició en CSS
El opacitat és una propietat CSS senzilla que s'utilitza per controlar la transparència d'una imatge establint el rang d'opacitat de 0 a 1. Reflecteix el canvi estàtic o sobtat d'un element per mostrar l'efecte d'opacitat. Per exemple, si volem mostrar una imatge com a transparent, hem d'establir el valor d'opacitat de 0 a 1. Després d'això, mostra l'efecte d'opacitat immediatament en lloc de trigar una mica. Per tant, fem servir a opacitat de transició en CSS que controla la transparència d'un element durant un període de temps definit. Utilitzant la funció de temps de transició en l'opacitat de transició, podem determinar la corba de velocitat d'un element que especifica l'efecte d'opacitat ràpida en una imatge. D'aquesta manera, utilitzem l'efecte d'opacitat de transició per reflectir els canvis en el període de temps especificat en lloc de produir-se immediatament.
Exemple 2: En aquest exemple, utilitzarem la propietat d'opacitat de transició que reflecteix l'efecte d'opacitat en una durada de temps especificada en lloc d'immediat.
Fitxer1.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> Sortida
