CSS Background Opacity Without Affecting Child Elements

Looking at various websites out there we stumble upon parts of the web which are semi transparent.

The Problem

Lets look at the following example

<div style="opacity:0.5;background-image:url(......);">

          <div><p> Checking Transparency</p></div>

</div>

So what' going to happen here? Would this work?

The answer is yes, but there is a con to it,as we all know that child elements adopt the properties of the parent elements so in this case the opacity for the child div which displays the text would also be changed to 0.5.

So now the real question,how to overcome this?

Your solution would be something like this

<div style="opacity:0.5;background-image:url(......);">

          <div style="opacity:1;"><p> Checking Transparency</p></div>

</div>

But  this wouldn't work either because of the fact that the properties of parent element are given the most property.

The Solution

I have come across a number of solutions , I would be mentioning some of them down in this article

1.Separate div for Background

So this might not be the easiest method but this is what I used to do at the beginning when I just got started(Because I was too lazy to google regarding how to overcome this problem)

Here's the code which will help you understand how's this working

<div>

     <div style="background-image:url(......);opacity:0.5;">

     </div>

     <div> <p>We have a text with no transparency</p></div>

     <.div>

</div>

So what did we actually here?

Simple enough we didn't apply the opacity to parent element ,instead we just applied opacity to its child(which is the sibling to our element with text) ofcourse the properties of one sibling doesn't apply on another one,so yes now we have a background in a separate div which is a sibling to our div with text so the opacity of div with text is 1 now.

Note:There is a reason why we made a div with text after the div with background the reason for that is that our code runs from top to bottom so in this case the browser first applies the image then it shows the text over it, if we used the div with text before the div with background the image would come over our text.

2.RGBA Method

Another method we could use is RGBA method it looks something like this

<div style="opacity:rgba(0,0,0,0.5);">

      <div><p>Text with no transparency</p></div>

</div>

So in this case the last part of our rgba which is 0.5 is the opacity to the background of parent element,the con to this method is that the older version of internet explorer doesnt support this method.

In order to overcome this use this in your stylesheet

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cff66000,endColorstr=#4cff66000);

So we see an 8 digits hex code here where first 2 digits represent opacity,the second two digits represent red and so on but to apply opacity in this case you would need to use a hex calculator from here(make sure you multiply from hex into hex and answer should also be in hex):

Click here

So if i want an opacity of 0.3 I would multiply 0.3 * 225
and the answer i would get would be 66f I added 66 into the first two places in my 8 digit hex code and hola i now have a div with opacity 0.3.

Other Articles:

Glassy Login and Registration form V1.0 (Fully Responsive and based on Bootstrap)

Fully Responsive Login Form V3.0 based on Bootstrap

Toggle button (Styled like IOS)

If you have any confusions in mind or want to ask for snippets leave a comment below or leave a message on our page

https://www.facebook.com/roundCubeInc