revision:
- sets the opacity level for an element. The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.
Note: When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read. If you do not want to apply opacity to child elements, use RGBA color values instead.
Property values:
number : specifies the opacity. From 0.0 (fully transparent) to 1.0 (fully opaque)
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
The following div element's opacity is 0.5. Note that both the text and the background-color are affected by the opacity level:
opacity 0.1
opacity 0.3
opacity 0.6
opacity 1 (default)
<div>
<p style="margin-left:-2vw;">The following div element's opacity is 0.5.
Note that both the text and the background-color are affected by the opacity level:</p>
<div id="DIV-A">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam
at erat pulvinar, at pulvinar felis blandit...</div><br>
<div class="DIV-B first"><p>opacity 0.1</p></div>
<div class="DIV-B second"><p>opacity 0.3</p></div>
<div class="DIV-B third"><p>opacity 0.6</p></div>
<div class="DIV-B"><p>opacity 1 (default)</p></div>
</div>
<style>
#DIV-A{background-color: red;opacity: 0.5;}
.DIV-B {background-color: #4CAF50; padding: 1vw;}
div.first {opacity: 0.1;}
div.second {opacity: 0.3;}
div.third {opacity: 0.6;}
</style>