Menu
Example explained First, we create a <div> element (class="background") with a background image, and a border. Then we create another <div> (class="transbox") inside the first <div>. The <div class="transbox"> have a background color, and a border - the div is transparent.
To achieve this, use a color value which has an alpha channel—such as rgba. As with opacity , a value of 1 for the alpha channel value makes the color fully opaque. Therefore background-color: rgba(0,0,0,. 5); will set the background color to 50% opacity.
EDIT: Changed title to actually be correct
I'm trying to simulate a modal popup in all HTML and CSS and am having a bit of bad luck with one single element of what I'm doing. I want the innermost div, the one with the content, to not be opaque like the border is, but no matter what I try with the CSS I cannot get it to work. Here's the code:
The CSS
.modalBackground { background-color:Gray; filter:alpha(opacity=70); opacity:0.7; } The HTML
<table style="height: 100%; width: 100%; position: fixed; top: 0; left: 0;"><tr><td class="modalBackground"> <div style="display: table; height: 40px; width: 150px; position: fixed; overflow: hidden; top: 40%; margin-top: -50px; left: 50%; margin-left: -75px; padding-left: 30px; border: solid 1px navy; background-color: White;"> <div style="#position: absolute; #top: 50%; display: table-cell; vertical-align: middle;"> <div style="#position: relative; #top: -50%;" ><asp:Image runat="server" ImageUrl= "~/images/indicators/indicatordark.gif" /> working...</div> </div> </div></td></tr></table> I am reaching my witt's end on this. I'm no HTML or CSS guru by any means, so an explanation of why the solution works would be greatly appreciated.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With