html - 画像や動画をプリセット画像に埋め込む方法

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

実際には、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;
}​

デモ

Answer 3

実際には非常に簡単です。Chrome の右クリック > [Inspect Element] または FireFox に相当するものを使用して、テレビの画像 (既に行ったように) とスライドする画像要素があることを確認できます。

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

jQuery または JavaScript を介してスライド画像に取り組む前に、単純な画像でこの html/css をテストできます。