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

我有一个包含PDF文件的iframe，应该用透明背景显示。到目前为止，我已经找到了两种方法来做到这一点：如何使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白页保持不透明的颜色？

来源

2016-11-18 Mr Speed

像这样的东西？

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>

来源

2016-11-18 10:44:14

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

回答

相关问题