CSS Opacity

The opacity property is used to specify the transparency of an element. In simple words it clarity or brightness of the image. The value of opacity defined in terms of digital value less then 1, the lesser opacity value displays the greater opacity. The value of opacity ranges from 0.1 to 1.0 and lower value produces greater opacity. The basic syntax is as follow :
 opacity: value;
Now Lets see an Example :
<html>
<head>
  <style>
    img {
      width: 250px;
    }
    img.opc {
      opacity: 0.5;
    }
  </style>
</head>
<body>
  <img src="opacity.jpg">
  <p>Original Image</p>
  <img class="opc" src="opacity.jpg">
  <p>Image with opacity: 0.5</p>
</body>
</html>
Output :


Original Image


Image with opacity: 0.5

Example 2 :

At below example use the Slider to increase/decrease the opacity.
<html>
<head>
  <style>
    img {
      width: 340px;
    }
    p {
      font-weight: bold;
    }
    #opc {
      background-color: orange;
      width: 90px;
    }
  </style>
</head>
<body>
  <img src="opacity.jpg">
  <p>Move The Slider below</p>
  <INPUT id="range" TYPE="RANGE" MIN="0.0" MAX="1.0" STEP="0.1" VALUE="0.7"/>
  <p id="opc">Opacity : 0.7</p>
  <script>
    document.getElementById('range').addEventListener('change', myFunc);
    function myFunc() {
      var value = document.getElementById('range').value;
      document.getElementsByTagName('img')[0].style.opacity = value;
      document.getElementById('opc').innerText = 'Opacity : ' + value;
    }
  </script>
</body>
</html>
Output :


Move The Slider below

Opacity : 0.7


Next Topic :