在图像上显示iframe？(Displaying Iframe on top of image?)

在图像上显示iframe？(Displaying Iframe on top of image?)

问题

我想在图像中显示iframe，但不知道如何做到这一点。 有没有比用CSS定位更好的方法？

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

Problem

I want to display an iframe within an image, but have no idea how to do this. Is there a better way than purely positioning with css?

I have a html page that displays other websites, and I would like to display an iframe within the screen of the image below on that page.

最满意答案

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

演示

.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边框半径来匹配图像。

I made the screen a background image and then used a absolute positioned iframe. i added a YouTube iframe to the screen in the demo.

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>

you could even use a 2 or 3px border-radius to match the image.