如何在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;
}回答 3
Stack Overflow用户
发布于 2013-11-21 01:47:54
您需要将视频播放器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将div设置为600px x 400px，并将其在父div中居中。例如，如果您需要将高度更改为800px，则将margin top更改为数量的1/2，在本例中为-400px
我应该提到的是，对于主目录的背景图像，有各种css选项，请在此处阅读它们：http://www.w3schools.com/cssref/css3_pr_background.asp。您可能希望查看background-size:contain
在你想要的将div放在图片的中央之后，只需按照这里的说明(http://flash.flowplayer.org/documentation/installation/index.html)来让你的视频在flowplayer中播放。
Stack Overflow用户
发布于 2013-11-21 01:36:46
我将使用z-index，这允许您设置垂直堆叠
请参阅：http://html.net/tutorials/css/lesson15.php
和
http://css-tricks.com/almanac/properties/z/z-index/
Stack Overflow用户
发布于 2013-11-21 01:40:44
最简单的方法是将视频放在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%;
}https://stackoverflow.com/questions/20102818
复制相似问题
腾讯云开发者
