Last Updated on February 12, 2021 by Roshan Parihar
In this tutorial, learn how to change background transparency of div element without affecting its child element. The short answer is: use the CSS RGBA color for the background of the div element.
Let’s find out how to change the background transparency with the examples given below.
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 CSS rgba color of CSS in place of the opacity property of CSS as given below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<style> .mainDiv{ background: url(../../images/nature-myimg.jpg); position: relative; z-index: 1; height: 190px; } .myDiv{ width: 200px; padding: 10px; background: rgba(16, 119, 224, 0.56); text-align: center; font-size: 21px; top: 14%; left: 35%; color: #fff; position: absolute; z-index: 2; } </style> <div class="mainDiv"> <div class="myDiv"> This is the transparency div element overlap over an image. </div> </div> |
Output
The above example contains the image over which the div element overlapped. The overlapped div element contains a 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.
Don’t Use CSS Opacity Property For Transparency of Div with Content
When you want to make the background of the div transparent, you may use the CSS opacity property. However, the opacity property may also affect the inner element of the div element and make them transparent too.
The rgba color of CSS can perform this task perfectly without any change in the transparency of the inner child elements.
I hope you like this tutorial on how to change the background transparency of div element using CSS.
You May Also Like to Read