In this article, we will set the opacity of an element using CSS. Opacity is the property of an element that describes the transparency of the element.
The opacity property is used to describe the transparency of the element. The value of opacity lies between 0.0 to 1.0 where a low value represents high transparency and a high value represents low transparency. The percentage of opacity is calculated as Opacity% = Opacity * 100.
Example 1: This example uses the CSS style tag to give the value of opacity to the HTML element using the ID selector.
HTML
<style> body { text-align: center; } h1 { color: green; } .GFG { opacity: 0.5; } </style> <h1>neveropen</h1> <h3> How to set the opacity level for <br>a division element using CSS? </h3> <div class="GFG"> Welcome to neveropen </div> |
Output:
Example 2: This example uses the Javascript function and CSS style tag to set the opacity of the HTML element.
HTML
<style> body { text-align: center; } h1 { color: green; } </style> <script> function fun() { document.getElementById("GFG") .style.opacity = "0.5"; } </script> <h1>neveropen</h1> <h3> How to set the opacity level for <br>a division element using CSS? </h3> <div id="GFG"> Welcome to neveropen </div> <button type="button" onclick="fun()"> Submit </button> |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
