Question

所以我试图通过在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;
}

Answer 1

最简单的方法是将视频放在div中，并将div的CSS background-image属性设置为您尝试使用的图像：

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-index，并将样式应用于图像而不是容器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%;
}

Answer 2

我会使用z-index，这允许你设置垂直堆叠

请参阅：http://html.net/tutorials/css/lesson15.php

和

http://css-tricks.com/almanac/properties/z/z-index/

Answer 3

您需要将视频播放器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 400px的div，并将其置于父div中。例如，如果您需要将高度更改为800px，请将margin-top更改为金额的1/2，在这种情况下为-400px

我应该提到主div的背景图像有各种css选项，请在这里阅读：http://www.w3schools.com/cssref/css3_pr_background.asp。您可能需要查看background-size：contains

根据需要将div置于图像中心后，只需按照此处的说明（http://flash.flowplayer.org/documentation/installation/index.html）即可使用流媒体播放视频。

如何在HTML / CSS中将嵌入的视频放在图像的顶部？

3 个答案: