How to change background transparency Without Affecting Child

In this tutorial, learn how to change background transparency of div element without affecting its child element. The opacity of background for transparency can be made by using the rgba colors of CSS.

If you want to make the background of div transparent, you may use CSS opacity property. However, the opacity property may affect the inner element of the div also and make them transparent too. You may also like how to create image hover overlay effect transparent using CSS.

So, how to change the background transparency without affecting the inner content of div. The answer is: use the rgba color of CSS for the background of the div element.

How to Change Background Transparency Without Affecting the Child Element of Div

If you want to perform the background transparency and don’t want to affect the transparency of the inner content. You have to use the rgba color of CSS in place of the opacity property of CSS.

The rgba color of CSS can perform this task perfectly without any change in the transparency of the inner child elements.


This is the transparency div element overlap over an image.

The above example contains the image over which the div element overlapped. The overlapped div element contains background with transparency using the rgba color of CSS.

You can see that it has no effect on the inner content of the div element. The inner div content remains visible without any transparency.

Hope, you like this tutorial. If you have any query regarding this tutorial, please comment below. Also tell me, which method are you using to change background transparency of div element?


Get FREE Access to Toolkit and Resources that we are using in Tutorialdeep that Every Professional Should Have! in one handy PDF.

Get the PDF

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Download Link Will be Send to Your Email id