Opacité en CSS est une propriété qui spécifie de contrôler la transparence des éléments tels que contenu ou images . En utilisant cette propriété, nous pouvons définir n'importe quelle image pour qu'elle soit complètement opaque ( visible ), entièrement transparent ( caché ), ou translucide (partiellement visible). Il faut une valeur numérique comprise entre 0 et 1. Où 0 définit entièrement transparent et 1 définit complètement visible. Les valeurs d'opacité comprises entre 0 et 1, telles que 0,2, 0,4, 0,6, etc., font passer une image de transparente à opaque en augmentant progressivement la valeur décimale.
Syntaxe
opacity :
La valeur numérique doit être comprise entre 0 et 1 pour rendre l'image semi-transparente. Si nous fournissons 1, l'image sera opaque, si la valeur numérique est 0, l'image devient complètement transparente.
Exemple 1 : Dans cet exemple, nous utiliserons la propriété opacity pour rendre l'élément transparent lorsque vous déplacez la souris sur l'élément.
Principal.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. Sortir
Passez la souris sur la case rouge pour afficher un effet de transparence ou d'opacité.
Opacité de transition en CSS
En CSS , un opacité des transitions est une propriété utilisée pour changer en douceur l'état d'opacité d'un niveau à un autre. Cela signifie que l'opacité de transition change l'état de l'élément opaque en transparent avec une durée définie. La transition a quatre propriétés : transition-property , transition-duration, transition-timing-function et transition-delay , utilisées pour effectuer l'effet d'opacité sur une image. Le durée de transition est une propriété importante pour les changements progressifs ou les changements soudains qui reflètent l'effet d'opacité sur un élément sur une durée définie en millisecondes ou en secondes.
La propriété abrégée de transition est la suivante :
transition: [transition - property] [transition -duration] [transition -timing -function] [transition - delay];
Syntaxe pour définir l'opacité de la transition 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 } Propriété de transition
Voici les propriétés de transition utilisées pour contrôler les effets de transition.
| Valeur | Description |
|---|---|
| Transition-propriété | Il est utilisé pour définir le nom de la propriété CSS qui montre l'effet de transition vers les images. |
| Durée de transition | Il permet de définir la période de temps en secondes ou millisecondes pour afficher l'effet de transition. |
| Fonction de synchronisation de transition | Il est utilisé pour définir la courbe de vitesse sur une image pour montrer l'effet de transition. |
| Transition-retard | Spécifie si l'effet de transition est initié sur l'élément ou l'image. |
Remarque : lors de la définition de la propriété de transition sur l'image ou le contenu, nous devons définir la propriété transition-duration ; sinon, la durée devient 0 et aucun effet ne sera affiché.
La nécessité d'une opacité de transition en CSS
Le opacité est une simple propriété CSS utilisée pour contrôler la transparence d'une image en définissant la plage d'opacité de 0 à 1. Elle reflète le changement statique ou soudain sur un élément pour montrer l'effet d'opacité. Par exemple, si nous voulons afficher une image transparente, nous devons définir la valeur d'opacité de 0 à 1. Après cela, l'effet d'opacité est affiché immédiatement au lieu de prendre un certain temps. Par conséquent, nous utilisons un opacité des transitions en CSS qui contrôle la transparence d'un élément sur une période de temps définie. En utilisant la fonction de temps de transition dans l'opacité de transition, nous pouvons déterminer la courbe de vitesse d'un élément qui spécifie l'effet d'opacité rapide sur une image. De cette façon, nous utilisons l’effet d’opacité de transition pour refléter les changements survenus au cours de la période spécifiée au lieu de se produire immédiatement.
Exemple 2 : Dans cet exemple, nous allons utiliser la propriété d'opacité de transition qui reflète l'effet d'opacité dans une durée spécifiée plutôt qu'immédiatement.
Fichier1.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> Sortir
