미리 설정된 이미지에 이미지 또는 비디오를 포함하는 방법

Question

웹 사이트 소개 페이지를 작성하고 있으며이 페이지의 스타일이 정말 좋음 : http://www.davidhutton.com/ 다른 이미지에서 움직이는 이미지/비디오가있는 곳입니다.

내가 여기에 TV 용기에 이미지를 넣을 수를 얼마나을 단순화하기 위해 : 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

사실 아주 간단합니다.

는

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

이 작업을 테스트 할 수 있습니다 : 당신은 거기에 TV의 이미지입니다 (당신이했던 것처럼)이며 슬라이딩 이미지 요소 있는지 "요소 검사"또는 파이어 폭스와 동등한> 크롬의 오른쪽 클릭을 사용할 수 있습니다 html/css 간단한 이미지로 jQuery 또는 JavaScript를 통해 슬라이딩 이미지를 처리하기 전에

Answer 3

실제로 TV 이미지를 배경 이미지로 설정하고 다른 이미지를 동일한 컨테이너에 배치합니다.

<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