如何在预设图像中嵌入图像或视频答案

【问题标题】：how to embed images or video in a preset images如何在预设图像中嵌入图像或视频
【发布时间】：2012-06-22 00:23:48
【问题描述】：

我正在写一个网站介绍页面，非常喜欢这个页面上的风格：http://www.davidhutton.com/ 在另一个类似的图像中有移动图像/视频。

为简化起见，我如何将图像放入电视容器中：http://jsfiddle.net/h9Nn3/2/

我不确定它有多复杂，但它过于复杂，至少一个起点将不胜感激！

【问题讨论】：

【解决方案1】：

其实这很简单。您可以使用 Chrome 的右键单击 >“检查元素”或等效的 FireFox 来查看有一个电视图像（如您所做的那样）和一个滑动图像元素：

position: absolute;
top: #px;
left: #px;

在通过 jQuery 或 JavaScript 处理滑动图像之前，您可以使用一个简单的图像来测试这个 html/css

【讨论】：

【解决方案2】：

我实际上将电视图像设置为背景图像，并将您的其他图像放置在同一个容器中。

<div id="content">
    <img src="https://www.google.com/images/srpr/logo3w.png" />
</div>

#content {
    background-image: url('http://www.officialpsds.com/images/thumbs/tv-screen-1-psd29071.png');
    width: 373px; /* 400 - 27 for padding */
    height: 294px; /* 322 - 28 for padding */
    padding: 27px 0 0 28px;
}

DEMO

【讨论】：

【解决方案3】：

根据您的示例，您可以这样解决：

<style>
div.container {
    width:          337px;
    height:         297px;
    padding:        25px 35px 0px 28px;
    background:     url(http://www.officialpsds.com/images/thumbs/tv-screen-1-psd29071.png) no-repeat 0 0;
}

div.container > div {
    height:         189px;
    overflow:       hidden;
    border:         1px solid red;
}
</style>

<div class="container">
    <div>
        This container should have a red border and fit's exactly the screen.
        You can replace or fill it with everything you want, for example an img-tag.
    </div>
</div>

【讨论】：