rgba in css
In this article we are going to learn about rgba property in css, how to specify both background color and opacity of an html element.
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, image style in css and image style in css so, we will be focusing on rgba property.
rgba
It is a Cascading Style Sheet property used to specify both background color and opacity of an html element. To control how much the background color of an element is deep or light.
Let us create a div element with rgba property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.rgba-example {
background: rgba(0,0,0, 30%);
color: white;
}
<style/>
</head>
<body>
<div class="rgba-example">This is a div element with rgba property and 30% opacity 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 rgba property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.rgba-example {
background: #000;
color: white;
}
<style/>
</head>
<body>
<div class="rgba-example">This is a div element without rgba 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 rgba property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.rgba-example1 {
background: rgba(13,110,253, 20%);
color: white;
}
.rgba-example2 {
background: rgba(13,110,253, 45%);
color: white;
}
<style/>
</head>
<body>
<div class="rgba-example1">This is a div element with rgba property and 20% opacity applied.</div>
<div class="rgba-example2">This is a div element with rgba property and 45% opacity 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 rgba property and opacity applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.rgba-example1 {
background: rgba(13,110,253, 20%);
color: white;
}
.rgba-example2 {
background: rgba(13,110,253, 0%);
color: white;
}
.rgba-example3 {
background: rgba(13,110,253, 45%);
color: white;
}
<style/>
</head>
<body>
<div class="rgba-example1">This is a div element with rgba property and 20% opacity applied.</div>
<div class="rgba-example2">This is a div element with rgba property and 0% opacity applied.</div>
<div class="rgba-example3">This is a div element with rgba property and 45% opacity 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.