Transparency on parent div background

I wonder if it's possible to affect the bg color or opacity of the parent div.

I have a div with this transparent white color:

background-color:rgba(255,255,255,0.9);

The div contains textfields with rounded corners, can the textfields background color in some way be a negative transparency-number so the total opacity of the div and textfield equals 0.5?

Its like mmore transparency in a rounded rec of a already transparent div.

I have come up with 3 possible solutions:

1. Make parent dic completely transparent and draw divs as a frame around the fields. (Sounds very complicated.)
2. Add the content below the div again, i开发者_Go百科nside the textfield. (Performance?)
3. Some kind of intersection.

What do you think I should do?

-- Edit ---

I used a variation of solution #2, I created a png file. Here is the (untweaked)result (Click contact us to open the modal div). It's hard to see, because of the blur but the window is transparent too.

Note this is far from the best solution since one have to update the png when I update the content below it.

---

If I understand correctly, you want to open a window/hole in the parent div. As far as I know, you can't do that, because the div is behind the text boxes, and any transparency you apply tho them will cause the div to show trough the boxes, NOT the content behind the div.

Maybe, instead of a background color, you can make the div background a PNG image with two transparent holes that coincide with text boxes, but this is a workaround like yours...

---

As far as I know, the transparency applied to the outer div will apply to everything inside it. I don't know exactly what you want to achieve here, maybe you should post some more code or a mockup on jsfiddle.

This is what I could find on the subject: http://css-tricks.com/384-non-transparent-elements-inside-transparent-elements/

EDIT: For your problem what I would try (I'm not sure if it will work) is follow a similar solution to the link I posted before. Have two separated divs positioned one above the other. I'd recomend you have the form with your transparent inputs on the uper layer, maybe that can do something for you? I don't know what else to tell you, the png solution isn't the best, but you might need to use png's here and there.

Something like this maybe: http://jsfiddle.net/XnATc/21/

---

Johannes Lund

Yes you should use png image files for this else things gonna be very complicated with hex color coding and its mathematics.