如何在預設圖像中嵌入圖像或視頻

Question

我正在編寫一個網站介紹頁面，並非常喜歡此頁面上的樣式：http://www.davidhutton.com/其中有像這樣的其他圖像中移動圖像/視頻。

爲了簡化這是怎麼回事，我可以把圖像在電視容器的位置：http://jsfiddle.net/h9Nn3/2/

我不知道它是多麼複雜，但它過於複雜，至少一個起點，將不勝感激！

Answer 1

根據您的例子中，你可以解決這個問題是這樣的：

<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> 

Answer 2

實際上這很簡單。您可以使用Chrome的右鍵>「檢查元素」或Firefox相當於看到，有一臺電視機的圖像（如你所做的）和一個滑動的圖像元素是：

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

您可以測試此HTML/CSS與一個簡單的圖像，然後通過jQuery或JavaScript解決滑動圖像

Answer 3

我真的將電視圖像設置爲背景圖像，並將您的其他圖像放在同一容器內。

<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