CSS Transparent Background Color

In today’s tutorial, we are going to talk about the CSS transparent background color properties. Basically, two properties are used for setting the background color to transparent in CSS3. The first one is by using the Opacity property, and the second one is by using the RGB property.

Let’s discuss what these properties actually do.

Opacity Property In CSS

When we apply opacity property for transparency on an element so it affects its child elements as well, suppose we are creating HTML divs and we have an element like text in <p> tag so it will also get transparent.

For better understanding Check out the example below.

Example

<html>
<head>
<style>
div {
  background-color: pink;
  padding: 20px;
  width: 70%;
  margin: auto;
  color: white;
}

div.one {
  opacity: 0.1;
}

div.two {
  opacity: 0.4;
}

div.three {
  opacity: 0.7;
}
</style>
</head>
<body>

<div class="one" style="background-image: url(s1.png);"><p>tranparency1</p></div>
<div class="two" style="background-image: url(s1.png);"><p>tranparency2</p></div>
<div class="three" style="background-image: url(s1.png);"><p>tranparency3</p></div>
<div style="background-image: url(s1.png);"><p>opacity is not applied</p></div>

</body>
</html>

Code Explanation

In the above code we created a basic HTML  structure, we created 4 divs ”div one ”, ”div two ”and  ”div three ” last we created a simple div without class.

In the divs, we added a background picture and we assigned them a child element as well which is the <p> tag.

With the help of CSS we designed all divs, we applied transparency by using the Opacity property of different ranges to each div.

Let’s check the results below.

Output

As you can see from the output above the first div background image is less transparent than the “div two”, and “div two” transparency is less than “div three” and the “div three” transparency is lesser than the last “div” because we did not apply opacity on the last div.

Note: the transparency range of opacity property starts from 0.0 to 1.0. so remember that less range will produce more transparency.   

Now let’s discuss our next CSS transparency property.

RGB Property In CSS

The RGB property is also used to apply transparent backgrounds, it uses three colors RGB(red, green, blue) these are the parameters of RGB and in the end, we include 1 more parameter which is called alpha in which we specify the transparency range.

Check out the example below.

Example

<html>
<head>
<style>
div {

  padding: 20px;
  width: 70%;
  margin: auto;
  color: white;
  padding-top: 4%;

  }

div.one {
  background: rgba(76, 175, 180, 0.2);
 height: 10%;
 
}
div.two {
  background: rgba(76, 175, 180, 0.4);
height: 10%;
}

div.three {
  background: rgba(76, 175, 180, 0.6);
height: 10%;
}
#maindiv{
    background: url(s.jpg);    
    background-repeat: no-repeat; 
    background-position: center;    
    background-size: cover;
    height: 50%;
    background-blend-mode: lighten;

}

</style>
</head>
<body>

<p>using RGBA property:</p>
<div id="maindiv"><div class="one"><h3>appling opacity 10%</h3></div>
<div class="two"><h3>applying opacity 30%</h3></div>
<div class="three"><h3>applying opacity 60%<h3></div>

</div>
</body>
</html>

Code Explanation

In the above code we created a main div and give it an id “maindiv” then we created three more divs inside the main div.

We applied internal CSS on the divs, in the main div we added a background picture and designed it. We also designed and applied the RGBA property on the “div class=one” “div class= two” and “div class= three” by accessing their classes. 

See the output below.

Output

As you can see from the output above the background image got a little transparent because of rgba colors let’s understand what the above code actually did.

In the above code, we created a div with a background image, and then for adding transparency we created another divs because we can’t directly apply the rgba property on the background image so we used divs here, and on each div, we applied a different range of rgba property.

In the “div one” we applied 10% rgba, which means we set the alpha parameter to 0.2 then in the next div we set the range to 0.4, and in the last div, we set it to 0.6. 

And you can see the first div is more transparent than the second one, and the second div is more transparent than the third div.

The most important thing which should be noticed is that the headings in the divs did not get transparent along the divs, because as we mentioned above the rgba property does not affect the child elements that’s why the headings tags under the divs did not get affected.

You can use the rgba property without a background picture as well.

Conclusion

In this tutorial we talked about the CSS properties of transparent background color, we discussed the two CSS properties for transparency “Opacity” and “RGB”.

We also discussed their examples by using Opacity and RGB properties with brief code explanations.

That’s all for today hope you like the tutorial if you have any queries regarding this article so feel free to ask below. Thanks for reading.

Suggested Articles:

Leave a Comment