Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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, inside 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.

like image 562
Johannes Lund Avatar asked Nov 13 '22 20:11

Johannes Lund


1 Answers

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...

like image 109
xOneca Avatar answered Dec 18 '22 08:12

xOneca