mydomain
No ADS
No ADS

CSS Opacity Tutorial with Examples

  1. CSS Opacity
  2. RGBA

1. CSS Opacity

No ADS
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>

2. RGBA

No ADS
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.
  • CSS Color
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>
No ADS
No ADS