如何把一個iframe放在一個iframe之上

我想把一個iframe放在另一個之上，最上面的一個放在不透明度較低的位置，這樣它們都可見。這是可能的，如果是這樣的話？如何把一個iframe放在一個iframe之上

<html> 
    <body> 
     <iframe src = "website1" scrolling="no" 
      style="height:1770px;width:100%; 
      display: block; margin: 0; padding: 0; border: none; 
      position: static; top: 0px; left: 0px;"> 
     </iframe> 

     <iframe 
      src="website2" 
      style="height:1770px;width:100%; 
      display: block; margin: 0; padding: 0; border: none; 
      position: static; top: 0px; left: 0px; 
      opacity: 0.5;"> 
     </iframe> 
    </body> 
</html>

來源

2017-05-12 John

你試過實現它按我的答案嗎？ @ 約翰 –

包裹一個div裏面兩個I幀，然後一個div容器內的兩個格，如：

<div id="container"> 
<div id='idiv1'> 
    <iframe id="f1" src = "https://en.wikipedia.org" 
     style="height:1770px;width:100%;"> 
    </iframe> 
</div> 

<div id='idiv2'> 
    <iframe id="f2" src = "https://en.wikipedia.org" 
     style="height:900px;width:50%;"> 
    </iframe> 
</div> 
</div>

用CSS

#container { 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 
#idiv1{ 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
#idiv2 { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 25%; 
} 
#idiv2 { 
    z-index: 10; 
    opacity:0.5; 
}

代碼在行動：運行代碼片斷

#container { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 
#idiv1{ 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
#idiv2 { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 25%; 
 
} 
 
#idiv2 { 
 
    z-index: 10; 
 
    opacity:0.5; 
 
}

<div id="container"> 
 
<div id='idiv1'> 
 
    <iframe id="f1" src = "https://en.wikipedia.org" 
 
     style="height:1770px;width:100%;"> 
 
    </iframe> 
 
</div> 
 

 
<div id='idiv2'> 
 
    <iframe id="f2" src = "https://en.wikipedia.org" 
 
     style="height:900px;width:50%;"> 
 
    </iframe> 
 
</div> 
 
</div> 
 

 
</div>

來源

2017-05-12 16:22:15

-2

你可以試試這個片段嗎？

<div class="container"> 
    <iframe class="iframe1" src = "https://codepen.io" scrolling="no"> </iframe> 
    <iframe class="iframe2" src="https://codepen.io" scrolling="no"> </iframe> 
    </div>

，併爲CSS：

.container{ 
position:relative; 
margin:0 auto; 
width:100%; 
text-align:center; 
} 

.iframe1{ 
position: absolute; 
left: 0; 
top: 0; 
display:block ; 
height:300px; 
opacity:.5; 
background-color: blue; 
} 

.iframe2{ 
position: absolute; 
left: 0; 
top: 0; 
display:block ; 
height:300px; 
background-color: green; 
opacity:1; 
}

The pen link

來源

2017-05-12 16:43:41

如何把一個iframe放在一個iframe之上

回答

相關問題