PageResource.com - Web Development Tutorials

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.

.box
{
width:240px;
height:150px;
padding:10px;
background-image:url('damask.png');
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.

Leave a Reply


Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy