title: Create non-transparent div on top of transparent parent element
body: <blockquote>
    <p>EDIT: Changed title to actually be
    correct</p>
  </blockquote>
  
  <p>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:</p>
  
  <p>The CSS</p>
  
  <pre><code>.modalBackground {
      background-color:Gray;
      filter:alpha(opacity=70);
      opacity:0.7;
  }
  </code></pre>
  
  <p>The HTML</p>
  
  <pre><code>  &lt;table style="height: 100%; width: 100%; position: fixed; top: 0; left: 0;"&gt;&lt;tr&gt;&lt;td class="modalBackground"&gt;
      &lt;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;"&gt;
          &lt;div style="#position: absolute; #top: 50%; display: table-cell; vertical-align: middle;"&gt;
              &lt;div style="#position: relative; #top: -50%;"
                  &gt;&lt;asp:Image runat="server" ImageUrl= "~/images/indicators/indicatordark.gif" /&gt; working...&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  </code></pre>
  
  <p>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.</p>