title: Is there a way to make a solid div with 3 transparent boxes in it?
body: <p>I've seen coding on here for one transparent box inside a div, <br>
  but not for multiple and I'm having issues getting anything to work right.. <br>
  I have one outter div that holds 3 boxes inside to the left, center &amp; right with a border. <br>
  I want those 3 boxes to be transparent with opacity 0.3 all the way thru to the main background.. <br>
  Is it possible to accomplish this with the simple coding I'm using without <code>FlexBox</code> or <code>JavaScript</code>?? <br> 
  How can I make the main div solid with 3 transparent boxes in it?? <br>
  Here is my coding and a image..</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  background-image: url("http://lorempixel.com/500/800/nature/3");
  background-color: #ffffff;
  background-position: top center;
  background-repeat: no-repeat; 
  background-size: cover;
  height:600px;
  width: 100%;
  font-size: 20px;
  margin: 0px;
  padding: 0px;
  background-attachment:fixed;
  z-index: 9999px;  
  }
  
  main {
  background: #336699;
  width:90%;
  height:600px;
  margin: 300px 0px 0px 100px;
  padding: 10px;
  z-index: 1;
  }
    
  .divl {
  background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
  background-attachment: fixed;
  background-size: cover;
  opacity: 0.3;
  filter: alpha(opacity=30); /* For IE8 and earlier */
  float:left;
  text-align:center;
  width: 20%;
  height: 100%;
  margin:0px;
  padding: 0px;
  border: 2px solid black;
  border-radius: 5px;
  }
  
  .divr {
  background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
  background-attachment: fixed;
  background-size: cover;
  opacity: 0.3;
  filter: alpha(opacity=30); /* For IE8 and earlier */
  float:right;
  text-align:center;
  width: 20%;
  height: 100%;
  margin:0px;
  padding: 0px;
  border: 2px solid black;
  border-radius: 5px;
  }
  
  .divc {
  background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
  background-attachment: fixed;
  background-size: cover;
  opacity: 0.3;
  filter: alpha(opacity=30); /* For IE8 and earlier */
  text-align:center;
  text-align:center;
  width: 50%;
  vertical-align: middle;
  height: 100%;
  margin:auto;
  padding: 0px;
  border: 2px solid black;
  border-radius: 5px;
  }
  text-align:center;
  width: 20%;
  height: 100%;
  margin:0px;
  padding: 0px;
  border: 2px solid black;
  border-radius: 5px;
  }
  
  .divr {
  background: transparent;
  opacity: 0.3;
  filter: alpha(opacity=30); /* For IE8 and earlier */
  float:right;
  text-align:center;
  width: 20%;
  height: 100%;
  margin:0px;
  padding: 0px;
  border: 2px solid black;
  border-radius: 5px;
  }
  
  .divc {
  background: transparent;
  opacity: 0.3;
  filter: alpha(opacity=30); /* For IE8 and earlier */
  text-align:center;
  text-align:center;
  width: 50%;
  vertical-align: middle;
  height: 100%;
  margin:auto;
  padding: 0px;
  border: 2px solid black;
  border-radius: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
    &lt;body&gt;
      &lt;main&gt;
       &lt;div class="divl"&gt;Left &lt;br&gt; Make This Box Transparent..&lt;/div&gt;
       &lt;div class="divr"&gt;Right &lt;br&gt; Make This Box Transparent..&lt;/div&gt;
       &lt;div class="divc"&gt;Center &lt;br&gt; Make This Box Transparent..&lt;/div&gt;
      &lt;/main&gt;
       &lt;div style="clear:both;"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/EwegA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EwegA.png" alt="enter image description here"></a></p>