39

I am using CSS attrubutes :

filter: alpha(opacity=90);

opacity: .9;

to make the DIV transparent, but when I add another DIV inside this DIV it makes it transparent also.

I want to make the outer(background) DIV only transparent. How ?

Adham
  • 63,550
  • 98
  • 229
  • 344

8 Answers8

92

Fiddle: http://jsfiddle.net/uenrX/1/

The opacity property of the outer DIV cannot be undone by the inner DIV. If you want to achieve transparency, use rgba or hsla:

Outer div:

background-color: rgba(255, 255, 255, 0.9); /* Color white with alpha 0.9*/

Inner div:

background-color: #FFF; /* Background white, to override the background propery*/

EDIT
Because you've added filter:alpha(opacity=90) to your question, I assume that you also want a working solution for (older versions of) IE. This should work (-ms- prefix for the newest versions of IE):

/*Padded for readability, you can write the following at one line:*/
filter: progid:DXImageTransform.Microsoft.Gradient(
    GradientType=1,
    startColorStr="#E6FFFFFF",
    endColorStr="#E6FFFFFF");

/*Similarly: */
filter: progid:DXImageTransform.Microsoft.Gradient(
    GradientType=1,
    startColorStr="#E6FFFFFF",
    endColorStr="#E6FFFFFF");

I've used the Gradient filter, starting with the same start- and end-color, so that the background doesn't show a gradient, but a flat colour. The colour format is in the ARGB hex format. I've written a JavaScript snippet to convert relative opacity values to absolute alpha-hex values:

var opacity = .9;
var A_ofARGB = Math.round(opacity * 255).toString(16);
if(A_ofARGB.length == 1) A_ofARGB = "0"+a_ofARGB;
else if(!A_ofARGB.length) A_ofARGB = "00";
alert(A_ofARGB);
Rob W
  • 341,306
  • 83
  • 791
  • 678
12

I had the same problem, this is the solution i came up with, which is much easier!

Make a little 1px x 1px transparent image and save it as a .png file.

In the CSS for your DIV, use this code:

background:transparent url('/images/trans-bg.png') repeat center top;

Remember to change the file path to your transparent image.

I think this solution works in all browsers, maybe except for IE 6, but I haven't tested.

2by
  • 1,083
  • 5
  • 22
  • 39
  • Was about to give up on achieving the effect because the code was becoming too cumbersome to keep it simple and understandable. And then I saw this. Thank you. – youcantryreachingme Mar 20 '18 at 03:11
1

Just do not include a background color for that div and it will be transparent.

SAF
  • 101
  • 2
  • 2
  • 8
0
.modalBackground
    {

        filter: alpha(opacity=80);
        opacity: 0.8;
        z-index: 10000;
    }
Vikash pathak
  • 57
  • 2
  • This won't achieve the desired effect, and indiscriminate usage of z-indices is probably not a good idea either - not to mention this usage probably won't have any effect at all. – John Dvorak Aug 13 '13 at 11:49
  • if z-index not require then don't use z-index attribute.. just use rest of code – Vikash pathak Aug 13 '13 at 12:03
  • then the only effect is that the values are changed slightly from the asker's situation, but the asker wants the inner elements to appear opaque. This won't achieve that. – John Dvorak Aug 13 '13 at 12:04
  • background-image:url('image/img2.jpg'); background-repeat:repeat-x use some image for internal image and use this – Vikash pathak Aug 13 '13 at 12:05
  • What's that? If it's the suggestion to solve the asker's problem, then it should be in the answer itself. – John Dvorak Aug 13 '13 at 12:07
0
background-image:url('image/img2.jpg'); 
background-repeat:repeat-x;

Use some image for internal image and use this.

Sliq
  • 15,937
  • 27
  • 110
  • 143
Vikash pathak
  • 57
  • 2
0

It's not possible, opacity is inherited by child nodes and you can't avoid this. To have only the parent transparent, you have to play with positioning (absolute) of the elements and their z-index

daveoncode
  • 18,900
  • 15
  • 104
  • 159
0

I don't know if this has changed. But from my experience. nested elements have a maximum opacity equal to the fathers.

Which mean:

<div id="a">
<div id="b">
</div></div>

Div#a has 0.6 opacity
div#b has 1 opacity

Has #b is within #a then it's maximum opacity is always 0.6

If #b would have 0.5 opacity. In reallity it would be 0.6*0.5 == 0.3 opacity

fmsf
  • 36,317
  • 49
  • 147
  • 195
-1
<div id="divmobile" style="position: fixed; background-color: transparent;
    z-index: 1; bottom:5%; right: 0px; width: 50px; text-align:center;" class="div-mobile">

Danish Jaffer
  • 11
  • 3
  • 2
    Your answer is a little short on informations... I'd suggest you to take the [tour], read [answer] and then [edit] your post :) – Ulysse BN Aug 09 '17 at 23:11
  • 1
    While answers are always appreciated, this question was asked 5 **years** ago, and already had an accepted solution. Please try to avoid 'bumping' questions to the top by providing answers to them, unless the question was not already marked as resolved, or you found a new and improved solution to the problem. Also remember to provide some [**context surrounding your code**](https://meta.stackexchange.com/questions/114762) to help explain it. Check out the documentation on [**writing great answers**](http://stackoverflow.com/help/how-to-answer) for some tips on how to make your answers count :) – Obsidian Age Aug 10 '17 at 04:23