CSS3 Opacity Tutorial
The opacity property is a very simple property that controls the opacity of an element using CSS. The opacity of an element can either be inherited from its parent element or set to a specific value from 1 to 0.
Let us look at a simple example. We will set up three <div> elements and apply the same style to all three using a class name. All three will have the same border and a background image.
border:3px solid black;
Now we will give each of our elements a different opacity value using inline styles.
<div class= "box" style= "opacity:1"> </div>
<div class= "box" style= "opacity:0.7"> </div>
<div class= "box" style= "opacity:0.4"> </div>
The image below shows how this style renders in the browser.
As you can see the opacity value is applied to all elements in the containing <div>. This includes the background image, border and the text element.