如何仅使 iframe 的背景透明（而不是前景）？

Question

我有一个包含 PDF 文件的 iframe，它应该以透明背景显示。到目前为止，我已经找到了两种方法：

1) 我只是将背景颜色设置为不透明度为 0.5 的值：

<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);"></iframe>

但背景不透明，虽然我设置了 50% 不透明的背景颜色：Result 1。如果我这样做：

background:transparent;

或者：

background-color:transparent;

我得到相同的结果。我仍然得到一个不透明的背景。

2）我可以直接设置iframe元素的不透明度，并添加：

opacity:0.5;

在样式属性里面。但这会设置所有 iframe 透明度，而不仅仅是背景。结果很丑：Result 2.

如何使背景透明，同时保持 PDF 白页为不透明颜色？

Answer 1

这样的？

body,
html {
  /*this is just so that this snippet displays correctly*/
  height: 100%;
  width: 100%;
  margin: 0px;
  overflow-y: auto;
}
.backdrop {
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px 20px 10px 20px;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  overflow-y: auto;
}
.backdrop > #pdf {
  padding: 10px 20px 10px 20px;
  background-color: #fff;
  width: 200px;
  margin-left: auto;
  margin-right: auto;
}

<div class="backdrop">

  <div id="pdf">
    PDF Content PDF Content PDF Content
    <br>PDF Content PDF Content PDF Content
    <br>PDF Content PDF Content PDF Content
    <br>PDF Content PDF Content PDF Content
    <br>PDF Content PDF Content PDF Content
    <br>PDF Content PDF Content PDF Content
    <br>PDF Content PDF Content PDF Content
    <br>PDF Content PDF Content PDF Content
    <br>PDF Content PDF Content PDF Content
    <br>PDF Content PDF Content PDF Content
    <br>PDF Content PDF Content PDF Content
    <br>

  </div>

</div>

Soem random body text behind the PDF
<br/>Soem random body text behind the PDF
<br>Soem random body text behind the PDF
<br>Soem random body text behind the PDF
<br/>Soem random body text behind the PDF
<br>Soem random body text behind the PDF
<br>Soem random body text behind the PDF
<br/>Soem random body text behind the PDF
<br>Soem random body text behind the PDF
<br>Soem random body text behind the PDF
<br/>Soem random body text behind the PDF
<br>Soem random body text behind the PDF
<br>