在图像上显示iframe？

Question

问题

我想在图片中显示iframe，但不知道如何执行此操作。有没有比用CSS定位更好的方法？

我有一个显示其他网站的html页面，我想在该页面下方图片的屏幕上显示一个iframe。

Answer 1

我将屏幕设为背景图像，然后使用绝对定位的iframe。 我在演示中向屏幕添加了一个YouTube iframe。

Demo

.outer {
    background-image: url('http://i.stack.imgur.com/6hnLq.png');
    width:420px;
    height:365px;
}
.inner {
    position: relative;
    background-color:;
    left: 67px;
    top: 109px;
    width:277px;
    height:150px;
}

............

<div class="outer"><iframe class="inner"></iframe>

您甚至可以使用2或3px边框半径来匹配图像。

Answer 2

基本上，您希望将iframe放置在绝对定位的容器中。然后将其直接放在图像上。这是一个例子。请注意，由于JS Same origin问题，iframe链接在小提琴内部不起作用。

http://jsfiddle.net/weyg1opk/

<div class="image_container">
<img src="http://i.stack.imgur.com/6hnLq.png" class="preview_image">
<div class="container">
    <iframe class="iframe_example" name="iframe_example">You do not have iframes enabled</iframe>   
</div>

.container {
    position: relative;  
    top: 110px;
    left: 68px
}
.image_container {
    width: 421px;
    height: 365px;
}
.preview_image{
    position: absolute;
}
.iframe_example {
    width: 270px;
    height: 155px;
    z-index: 1000;
}

Answer 3

也许你可以：

• 将图像裁剪成碎片，并用不带边框和固定尺寸的iframe替换屏幕图像

或

• 使用显示器作为背景，并使用具有绝对位置的div来精确匹配屏幕尺寸和位置。