title: how to make opacity of div lower than the over layered iframe
body: <p>I want to display sign up form where page is grayed out and the iframe containing the form appear in the middle as follows:</p>
  
  <p>code: </p>
  
  <pre><code>&lt;div id="cover5"&gt;
      &lt;iframe name="warning" src="SignIn.php" id="warning" style="position: relative; height: 250px;"&gt;
       &lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css: </p>
  
  <pre><code>#cover5 {
      position:absolute;
      top:0px;
      left:0px;
      overflow:hidden;
      display:none;
      width:100%;
      height:100%;
      background-color:gray;
      text-align:center;
      opacity: 0.5;
  }
  
  #warning {
      border-radius: 20px;
      top: 150px;
      margin:auto;
      position:relative;
      width:600px;
      height:fit-content;
      background-color:white;
      color:black;
      padding:10px;
      border: 5px solid #003366;
      opacity: 1;
  }
  </code></pre>
  
  <p>i want the opacity of the cover(div) to be low (background is blured) while the iframe shouldn't be blured, the problem is when i change the opacity of the div, the opacity of the iframe changes as well, how to solve the problem?</p>