2013-11-20 88 views
0

所以我試圖創建一個簡單的分層技術,通過將圖像放在html/css中的視頻後面。給視頻部分一些意義和背景風格。如何在HTML/CSS中放置圖像頂部的嵌入式視頻?

繼承人是我試圖實現的photoshop模型。

http://s8.postimg.org/tl749vxvp/example.jpg

HTML

div id= "background"> 
img src="images/imgc.jpg" class="stretch" alt="image" 
*Video embedding goes here* 

CSS

.stretch { 
    width : 100%; 
    height: auto;%; 
} 

#background { 
    position: relative ; 
} 

#wrapper { 
    background-size: 100% auto; 
} 

回答

0

您需要居中視頻播放器div(或最好是帶有背景圖像的div)。下面是一些HTML:

<html> 
    <head> 
     <!-- Flowplayer js and css --> 
    </head> 
    <body> 
     <div style="width:100%; height:100%; background-image:url('path/to/your/image.png');"> 
      <div id="player" style="width:600px; height:400px; position:absolute; left:50%; margin-left:-300px; top:50%; margin-top:-200px"></div> 
     </div> 
    </body> 
</html> 

注意:這個CSS:

width:600px; 
height:400px; 
position:absolute; 
left:50%; 
margin-left:-300px; 
top:50%; 
margin-top:-200px 

使得600px的X 400像素股利和家長專區內居中它。例如,如果您需要將高度更改爲800px,請將margin-top更改爲1/2的數量,在此情況下爲-400px

我應該提到,主div的背景圖像有各種css選項,在這裏閱讀:http://www.w3schools.com/cssref/css3_pr_background.asp。你可能想看看背景大小:包含

將div對準圖像的中心位置後,只需按照此處的說明(http://flash.flowplayer.org/documentation/installation/index.html)即可使用流式播放器播放視頻。

1

最簡單的方法是放在一個div視頻和div的CSS背景圖像屬性設置爲您要使用的圖像:

HTML:

<div class="film-background"> 
    *Video embedding goes here* 
</div> 

CSS:

.film-background { 
    background-image: url('url of your film image'); 
    background-repeat: no-repeat; 
} 

或者你可以使用絕對定位和z索引和樣式應用到圖像,而不是div容器:

HTML

<div> 
    <img src="img link" class="film-background"> 
    *Video embedding goes here* 
</div> 

CSS

.film-background { 
    z-index: -1; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
} 
相關問題