如何把一个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之上

回答

相关问题