如何使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的背景透明（而不是前景）？

回答

相關問題