透明的png没有在后台显示视频

时间:2017-03-30 19:52:55

标签: html css video alpha

我制作了一个带有影院设置的透明png,我在后台播放1秒钟的视频像gif一样播放,但我没有看到视频,我看到了身体背景颜色背景,也让z指数小于另一个,但在inspect元素上删除它会显示视频。

这不是原来只是为了显示问题



<div id="bg" style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%'>
	<img style='width:100%;height:100%;' alt='[]' src="http://www.moviebowlgrille.com/img/nav/rental.png">
	<video style='width:100%;height:100%;' alt='[]' autoplay loop>
		<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />
		Unfortunately, this site cannot run on your computer. Please upgrade your browser/buy a new computer.
</video>
</div>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

您需要使用css声明background-color: transparent才能看到透明色以上的视频。此外,您需要使用css声明position: absolute将图像和视频放在顶部。因此,css规则可能如下:img {position: absolute; background-color: transparent;} 请注意,分配给#bg的规则可能没用。

我希望我有任何帮助。

&#13;
&#13;
img {
  position: absolute;
  background-color: transparent;
}
&#13;
<div id="bg" style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%'>
	<img style='width:100%;height:100%;' alt='[]' src="http://www.moviebowlgrille.com/img/nav/rental.png">
	<video style='width:100%;height:100%;' alt='[]' autoplay loop>
		<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />
		Unfortunately, this site cannot run on your computer. Please upgrade your browser/buy a new computer.
</video>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您也可以根据需要编辑视频,如果您有视频编辑软件,则可以将PNG文件放在视频的顶部,编程较少,以便主机更轻松地运行您的网站。