Opacity
In this article we are going to learn about opacity property in css, how to specify the deepest or lightest (transparency) of an html element color.
We learnt about css in general, letter spacing in css, word spacing in css, text transform in css, text decoration in css, background image in css, background image repeat in css, background position in css and image style in css so, we will be focusing on opacity.
Opacity
Opacity is a Cascading Style Sheet property used to specify the opacity of an html element. To control how much the color of an element is deep or light.
Let us create a div element with opacity property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.opacity-example {
background: orange;
color: white;
opacity: 30%
}
<style/>
</head>
<body>
<div class="opacity-example">This is a div element with opacity property applied.</div>
</body>
</html>
So, we should have the following results and we can see that the background color and the color are more light.
Let us create another div element without opacity property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.opacity-example {
background: orange;
color: white;
}
<style/>
</head>
<body>
<div class="opacity-example">This is a div element without opacity property applied.</div>
</body>
</html>
So, we should have the following results and we can see that the background color and the color are more deep.
Let us create two div elements with same background color but different values of opacity property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.opacity-example1 {
background: purple;
color: white;
opacity: 20%;
}
.opacity-example2 {
background: purple;
color: white;
opacity: 45%;
}
<style/>
</head>
<body>
<div class="opacity-example1">This is a div element with 20% opacity property applied.</div>
<div class="opacity-example2">This is a div element with 45% opacity property applied.</div>
</body>
</html>
So, we should have the following results and we can see that the background color and the color of first div element is more light while the second is deep.
Let us create three div elements and hide another div element with just opacity property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.opacity-example1 {
background: purple;
color: white;
opacity: 20%;
}
.opacity-example2 {
background: purple;
color: white;
opacity: 0%;
}
.opacity-example3 {
background: purple;
color: white;
opacity: 45%;
}
<style/>
</head>
<body>
<div class="opacity-example1">This is a div element with 20% opacity property applied.</div>
<div class="opacity-example2">This is a div element with 0% opacity property applied.</div>
<div class="opacity-example3">This is a div element with 45% opacity property applied.</div>
</body>
</html>
So, we should have the following results and we can see that the second div element is hidden but still occupying the space while the other two are visible.