CSS Opacity Tutorial
View more Tutorials:
CSS Opacity is used to establish the opacity for an element. It accepts a numeric value 0 to 1. Some browsers also accept a percentage value (%) but not all.
CSS {opacity: 1} is the default opacity of an element, this value allows you to see the element most clearly. CSS {opacity: 0} will make the element transparent.
opacity: <alpha-value>; /* Example: */ opacity: 1.0; opacity: 0.5; opacity: 0;
Opacity will, when applying to an element, have an effect on all the contents of the element, including child elements. There is no inheritance of opacity, and you can establish a different CSS Opacity value for the child element, but the child element is still affected by the opacity of the parent element.
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>
For example, change the opacity of an image when the cursor is over the 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>
Using RGBA function helps you create a color by a combination of 4 values Red, Green, Blue, Alpha. In which Red, Green, Blue are integers receiving values from 0-255. Alpha represents the opacity, it takes a value from 0-1.
rgba(76, 175, 80, 0.1) rgba(76, 175, 80, 0.15) rgba(76, 175, 80, 1)
The color created by RGBA has an opacity. You can use this color as a background color for an element. This opacity only works with the background of element, it does not affect the content of the element and its child elements.
- 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>
For example, create an almost transparent box containing the description text of an 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>