title: How to make ONLY iframe's background transparent (and not foreground)?
body: <p>I have an iframe containing a PDF file, that should be shown with a transparent background. So far I've found two ways to do it:  </p>
  
  <p>1) I just set the background color to a value that has an opacity of 0.5:</p>
  
  <pre><code>&lt;iframe src = "myfile.pdf" allowtransparency="true" style="position:absolute;width:100%;height:100%;top:40px;left:0px;overflow:auto;z-index:5;background:rgba(0,0,0,0.5);background-color:rgba(0,0,0,0.5);"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>But the background isn't transparent, although I have set a 50% opaque background color:  <a href="https://i.stack.imgur.com/GGeE3.png" rel="nofollow noreferrer">Result 1</a>. If instead I do:  </p>
  
  <pre><code>background:transparent;
  </code></pre>
  
  <p>Or: </p>
  
  <pre><code>background-color:transparent;
  </code></pre>
  
  <p>I get the same result. I still get an opaque background.</p>
  
  <p>2) I can directly set the opacity of the iframe element, and add:</p>
  
  <pre><code>opacity:0.5;
  </code></pre>
  
  <p>Inside the style attribute. But this sets ALL the iframe transparency, and not only the background. The result is very ugly: <a href="https://i.stack.imgur.com/srgUB.png" rel="nofollow noreferrer">Result 2</a>.</p>
  
  <p>How can I make the background transparent while keeping the PDF white page to an opaque color?</p>