ansaurus

Question

Create non-transparent div on top of transparent parent element

Answer 1

+3 A:

It is annoying, but CSS doesn't allow that. Setting opacity for one element means no child element can have any greater opacity. (100% of 25% opacity is? Right.)

So, one solution is to use a tiny transparent PNG as a repeating background image to work around that. The only issue there is IE6, and there's an excellent workaround called supersleight.

(Updated. Think supersleight will work for you.)

Update Here's a very simple test case. Create the image (say, a PNG with 50% black fill) and then create this file--save them in the same folder. If you don't see a thin box with a transparent background behind 'stuff', then you're either not saving the file correctly or have saved the image somewhere else.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html>
<head>
<style type="text/css">
body { background:white; }
#overlay { background-image:url(test.png); }
</style>
</head>
<body>
<div id="overlay">stuff</div>
</body>
</html>

D_N 2010-03-01 15:18:54

I've tried adding a solid background to the innermost div but it had no effect. Maybe I did that wrong. here's the CSS I used for that:.solidBackground { background-image: url('images/176x1.PNG'); background-repeat: repeat-y;}176x1 is a 1-bit PNG set to white for the whole thing.

Payton Byrd 2010-03-01 15:22:34

CSS looks okay, but check that the path is correct (maybe it's ../images/176x1.png').

D_N 2010-03-01 15:26:04

Also, of course, you need to make sure you're saving the PNG as a transparency.

D_N 2010-03-01 15:29:43

I'm doing something fundamentally wrong. Can you point me to a working example that doesn't use Javascript?

Payton Byrd 2010-03-01 15:51:34

Can't find one that's very clear, except maybe this one: http://www.icoblog.com/2008/07/semi-transparent-png-buttons.html

D_N 2010-03-01 16:09:44

Added a simple test case. Give it a shot. If that works fine and you don't see anything wrong with what you have in your current file, mess around with the path you have to your image. I'd put money on the issue being either the path being wrong or the image not being saved as a transparency.. Also, any background color will show through, so if you're seeing a solid color, that may be why.

D_N 2010-03-01 16:17:58

ansaurus

tags:

views:

answers:

Create non-transparent div on top of transparent parent element

related questions