Le Tutoriel de CSS Opacity
View more Tutorials:
CSS Opacity permet d'établir l'opacité (opacity) d'un élément. Certains navigateurs acceptent également une valeur en pourcentage (%) mais pas tous.
CSS {opacity: 1} lest l'opacité par défaut d'un élément, cette valeur vous permet de voir l'élément le plus clairement possible. CSS {opacity:0} rendra l'élément transparent.
opacity: <alpha-value>; /* Example: */ opacity: 1.0; opacity: 0.5; opacity: 0;
L'opacité (Opacity), lorsqu'elle s'applique à un élément, aura un effet sur tout le contenu de l'élément, y compris les éléments enfants. Il n'y a pas d'héritage d'opacité, et vous pouvez établir une valeur CSS Opacity différente pour l'élément enfant, mais l'élément enfant est toujours affecté par l'opacité de l'élément parent.
opacity-example.css
#parent { border: 1px solid blue; padding: 5px; background:lightblue; } .child { display: inline-block; background: lightgreen; padding: 5px; margin: 10px; height: 50px; width: 150px; } .option { border: 1px solid #eee; padding: 5px; margin: 10px 0px; }
opacity-example.html
<!DOCTYPE html> <html> <head> <title>CSS Opacity</title> <meta charset="UTF-8"/> <link rel="stylesheet" href="opacity-example.css" /> <script> function changeOpa(event) { var opacityValue = event.target.value; var parentElement = document.getElementById("parent"); parentElement.style.opacity = opacityValue; } </script> </head> <body> <h3>CSS Opacity</h3> <p style="color:blue;">Set Opacity for parent element:</p> <div class="option"> <input type="radio" name="opa" onclick="changeOpa(event)" value="1" checked/> Opacity: 1 <br/> <input type="radio" name="opa" onclick="changeOpa(event)" value="0.5"/> Opacity: 0.5 <br/> <input type="radio" name="opa" onclick="changeOpa(event)" value="0"/> Opacity: 0 </div> <div id="parent"> I am a parent element <br/> <div class="child"> I am a child element. <br/> {opacity: 1} </div> <div class="child" style="opacity: 0.5"> I am a child element. <br/> {opacity: 0.5} </div> <br/> ... </div> </body> </html>
Par exemple, modifiez l'opacité d'une image lorsque le curseur se trouve sur (over) l'image.
opacity-hover-example.html
<!DOCTYPE html> <html> <head> <title>CSS Opacity</title> <meta charset="UTF-8"/> <style> .my-image { margin: 5px; } .my-image:hover { opacity: 0.5; } </style> </head> <body> <h3>CSS Opacity</h3> <p style="color:blue;">Move the cursor over Image</p> <img class="my-image" src="../images/flower.png" /> </body> </html>
L'utilisation de la fonction RGBA vous aide à créer une couleur par une combinaison de 4 valeurs Red, Green, Blue, Alpha. Dans lequel Red, Green, Blue sont des nombres entiers (integer)recevant des valeurs de 0-255. Alpha représente l'opacité (opacity), il prend une valeur de 0-1.
rgba(76, 175, 80, 0.1) rgba(76, 175, 80, 0.15) rgba(76, 175, 80, 1)
La couleur créée par RGBA a une opacité. Vous pouvez utiliser cette couleur comme couleur d'arrière-plan (background color) pour un élément. Cette opacité ne fonctionne qu'avec le fond (background) de l'élément, elle n'affecte pas le contenu de l'élément et de ses éléments fils.
- TODO Link!
grba-example.html
<!DOCTYPE html> <html> <head> <title>Transparent Box</title> <meta charset="UTF-8"/> <style> div { padding: 5px; } </style> </head> <body> <h3>Transparent Box</h3> <p style="color:blue;">With opacity:</p> <div style="background-color: rgba(76, 175, 80); opacity:0.1;"> {opacity:0.1} </div> <div style="background-color: rgba(76, 175, 80); opacity:0.3;"> {opacity:0.3} </div> <div style="background-color: rgba(76, 175, 80);opacity:0.6;"> {opacity:0.6} </div> <div style="background-color: rgba(76, 175, 80);"> {opacity:1.0} </div> <p style="color:blue;">With RGBA color values:</p> <div style="background-color: rgba(76, 175, 80, 0.1);"> {background-color: rgba(76, 175, 80, 0.1);} </div> <div style="background-color: rgba(76, 175, 80, 0.3);"> {background-color: rgba(76, 175, 80, 0.3);} </div> <div style="background-color: rgba(76, 175, 80, 0.6);"> {background-color: rgba(76, 175, 80, 0.6);} </div> <div style="background-color: rgba(76, 175, 80);"> {background-color: rgba(76, 175, 80);} </div> </body> </html>
Par exemple, créez une boîte presque transparente contenant le texte de description d'une image.
grba-example2.html
<!DOCTYPE html> <html> <head> <title>Transparent Box</title> <meta charset="UTF-8"/> <style> .img-container { display: inline-block; position: relative; } .img-desc { position: absolute; left: 5px; right: 5px; bottom: 15px; padding: 5px; text-align: center; background-color: rgba(76, 175, 80, 0.3); color: white; } </style> </head> <body> <h3>Transparent Box</h3> <div class = "img-container"> <img src="../images/image.png" width="320" height="178"/> <div class="img-desc"> This is an Image </div> </div> </body> </html>