Wie mache ich NUR iframes Hintergrund transparent (und nicht Vordergrund)?

Question

Ich habe einen iframe, der eine PDF-Datei enthält, die mit einem transparenten Hintergrund angezeigt werden sollte. Bisher habe ich zwei Möglichkeiten gefunden, es zu tun:

1) Ich habe gerade die Hintergrundfarbe auf einen Wert, eine Opazität von 0,5 hat:

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

Aber der Hintergrund ist nicht transparent, obwohl Ich habe eine 50% deckende Hintergrundfarbe eingestellt: Result 1. Wenn ich stattdessen tun:

background:transparent; 

Oder:

background-color:transparent; 

ich das gleiche Ergebnis zu erhalten. Ich bekomme immer noch einen undurchsichtigen Hintergrund.

2) Ich kann direkt die Opazität des iframe-Element festgelegt, und fügen:

opacity:0.5; 

Im Inneren des Stil-Attribut. Aber dies setzt ALLE iframe-Transparenz und nicht nur den Hintergrund. Das Ergebnis ist sehr hässlich: Result 2.

Wie kann ich den Hintergrund transparent machen, während die PDF-Seite weiß bleibt?

Answer 1

So ähnlich?

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>