html - 透明png不在背景中显示视频

Question

我用剧院设置制作了一个透明的 png，我将 1 秒的视频放在背景中像 gif 一样播放，但我没有看到视频，而是看到了 body 背景颜色背景，同时让 z 索引更小比另一个，但在检查元素上删除它会显示视频。

这不是原来的，只是为了说明问题

<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;背景色:透明； 请注意，分配给 #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>