CSS Opacity / Transparency

November 20, 2019

CSS Opacity / Transparency

The opacity CSS property sets the opacity of an element. The opacity property can take a value from 0.0 to 1.0 (default 1).

Example 1:

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: red;
opacity: 0.5;
filter: Alpha(opacity=50); /* IE8 and earlier */
}
</style>
</head>
<body>

<h1>The opacity Property</h1>

<p>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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit...</div>

</body>
</html>

Output:

When using 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 don't want to apply opacity to the child elements, use RGBA color values (more about colors in HTML/CSS you can here and here.)

Example 2:

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #4CAF50;
padding: 10px;
}

div.first {
opacity: 0.1;
filter: alpha(opacity=10); /* For IE8 and earlier */
}

div.second {
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
}

div.third {
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
</style>
</head>
<body>

<h1>The opacity Property</h1>

<p>The opacity property adds transparency to the background of an element, and to all of its child elements as well. This makes the text inside a transparent element hard to read:</p>

<div class="first"><p>opacity 0.1</p></div>
<div class="second"><p>opacity 0.3</p></div>
<div class="third"><p>opacity 0.6</p></div>
<div><p>opacity 1 (default)</p></div>

</body>
</html>

Output:

Example 3, with RGBA colors value:

<!DOCTYPE html>
<html>
<head>
<style>
div {
background: rgb(76, 175, 80);
padding: 10px;
}

div.first {
background: rgba(76, 175, 80, 0.1);
}

div.second {
background: rgba(76, 175, 80, 0.3);
}

div.third {
background: rgba(76, 175, 80, 0.6);
}
</style>
</head>
<body>

<p>With RGBA color values:</p>
<div class="first"><p>10% opacity</p></div>
<div class="second"><p>30% opacity</p></div>
<div class="third"><p>60% opacity</p></div>
<div><p>default</p></div>

</body>

Output:

The opacity property is often used with the : hover selector to change opacity on mouse-over:

<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}

img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy" width="170" height="100">

<p><b>Note:</b> In IE, a !DOCTYPE must be added for the :hover selector to work on other elements than the a element.</p>

</body>

Output:

To create the text in transparent box, first, create a <div> element (class="background") with a background image, and a border. Then we create another <div> element (class="transbox") inside the first <div>. The <div class="transbox"> have a background colour, and a border - the div is transparent. Inside the transparent <div>, we can add some text inside a <p> element.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div.background {
background: url(14.jpg) repeat;
border: 2px solid black;
}

div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>

<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>

</body>

Output: