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;

在style属性中。但这会设置所有iframe透明度，而不仅仅是背景。结果非常难看：Result 2。

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

Answer 1

这样的东西？

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: