Die Anleitung zu CSS Opacity
View more Tutorials:
CSS Opacity wird verwendet um die Opazität für ein Element festzulegen. Es akzeptiert einen numerischen Wert in Höhe von 0 bis 1. Einige Browser akzeptiert auch einen Prozent-Wert ( % ) aber nicht alles.
CSS {opacity: 1} ist die Default-Opazität eines Element. Dieser Wert erlaubt Sie, das Element deutlich am meisten zu sehen.CSS {opacity:0} wird das Element transparent machen.(transparent).
opacity: <alpha-value>; /* Example: */ opacity: 1.0; opacity: 0.5; opacity: 0;
Die Opazität wirkt sich beim Anwenden auf ein Element mit den allen Inhalt des Element, einschließend die Sub-Elementen. Es gibt keine Erbe von der Opazität und Sie können einen anderen Wert CSS Opacity für das Element einstellen aber das Sub-Element wird noch durch die Opazität des Vater-Element ausgewirkt.
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>
Z.B, Ändern Sie ein Foto (Image) wenn der Zeiger über das Foto ist.
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>
Die Anwendung der Funktion RGBA hilft Ihnen bei der Farbenerstellung durch die Verbindung von 4 Werten Red, Green, Blue, Alpha. Inzwischen sind Red, Green, Blue die Integer, die die Werten von 0-255 bekommen. Alpha vertritt die Opazität, es bekommt die Werte von 0-1.
rgba(76, 175, 80, 0.1) rgba(76, 175, 80, 0.15) rgba(76, 175, 80, 1)
Die Farbe wird durch RGBA mit der Öpazität erstellt. Sie können diese Farbe als Farbe-Hintergrund für das Element verwenden. Diese Opazität wirkt sich mit dem Hintergrund des Element. Es wirkt nicht mit der Inhalt des Element und Sub-Elementen.
- 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>
Z.B: Erstellen Sie eine fast transparente Schachtel (Box), die die Bezeichnung eines Foto enthält.
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>