透明png在后台不显示视频

Question

我用剧院设置的东西制作了一个透明的png，我在背景中放了一个1秒钟的视频，像gif一样播放，但是我没有看到视频，而是看到了身体背景的颜色背景，还让z index比另一个小一个，但是在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> 

Answer 1

您需要css声明background-color: transparent才能在透明颜色上方看到视频。 而且，您需要css声明position: absolute将图像和视频都放置在顶部。 因此，css规则可能如下： img {position: absolute; background-color: transparent;} img {position: absolute; background-color: transparent;}请注意，分配给#bg规则可能是无用的。

希望对您有所帮助。

 img { position: absolute; background-color: transparent; } 

 <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> 

Answer 2

您还可以根据需要编辑视频，如果您具有视频编辑软件，则可以将PNG文件放置在视频的顶部，因为PNG文件的编程较少，因此可以使主机更轻松地运行您的网站。