I am creating a webpage that have a transparent div.
I want to add a non-transparent div inside that transparent div and I find that it is also transparent.
I try to set the div inside to opacity:1 but it doesn't work.
What should I do?
+3
A:
There are two ways that I know of to work around this:
- Fake transparency on the containing div by using a transparent PNG as the background image.
- Separate the divs so that they are side-by-side, and then use relative or absolute positioning to stack them.
NilObject
2009-06-14 04:47:28
Well, by using a parent element with position:relative, you can also have an absolutely-positioned, translucent child element positioned behind normally-positioned, non-translucent child elements. This has the advantage of not needing external images or fixed sizes.
Shog9
2009-06-14 04:53:14
Depending on your situation you should consider, that IE6 does not support transparent PNGs by itself and needs some help (with additional javascript libraries).
merkuro
2009-06-14 05:29:49
rpflo
2009-06-14 05:36:16
There is a workaround for transparent PNGs on IE6 by using a little css. http://24ways.org/2007/supersleight-transparent-png-in-ie6
NilObject
2009-06-14 05:54:03
@NilObject: but in that case, you'd probably be better off just using a filter to fake opacity.
Shog9
2009-06-14 07:52:11
But then you must mess around with positioning, which may not be preferred. Since my answer gives to valid approaches, I was just pointing out that if you wanted to go with the transparent PNG approach, you can make it work.
NilObject
2009-06-14 12:54:54
Actually... You can use IE's gradient filter (with both starting and ending colors identical, and an appropriate alpha value for each) to fake background transparency without any positioning worries or a background image.
Shog9
2009-06-14 15:28:47
Ah, you're probably right, I misunderstood what you meant in your previous comment. I haven't experimented enough with filters in IE enough to say for sure, so I'll trust that you're right.
NilObject
2009-06-14 15:55:46
+1
A:
This doesn't work in CSS unfortunately. In the past I've used positioning to push the non transparent div containing the content into the transparent div. I couldn't dig up some old code from my projects, but I did find this blog post:
Praveen Angyan
2009-06-14 04:47:43