html - 图像开销 iframe

Question

我想在iframe. 为了更好地理解，我附上了下面的图片。

我怎样才能做到这一点？

Answer 1

position: absolute;你可以这样做z-index

http://jsfiddle.net/t35vL/

HTML：

<iframe src="http://jsfiddle.net/"></iframe>
<img src="http://flickholdr.com/600/400/dogs">​

CSS：

iframe{
  width: 600px;
  height: 400px;
  border : 2px solid  black;
  z-index: 2;
}

img{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  opacity: 0.3;
}

...这样图像就在 iframe 上分层，并防止在其中单击。

Answer 2

你可以尝试这样的事情：

    <iframe name="inlineframe" src="sample.html" frameborder="1" scrolling="auto" width="500" height="180" marginwidth="5" marginheight="5" ></iframe>
    <div style="position:absolute;
    left:0px; //edit as per iframe placement
    top:0px; //edit as per iframe placement
    z-index:-1;
    padding:5px;"> 
    <img src="rac_ftp.PNG" width="500" height="180" />
    </div>