透明png不在背景中显示视频
transparent png not showing video in background
我用剧院设置制作了一个透明的 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>
您需要 css 声明 background-color: transparent
才能看到透明色上方的视频。此外,您需要 css 声明 position: absolute
将图像和视频都放在顶部。因此,css 规则可能如下所示: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>
如果您愿意,您也可以编辑视频,如果您有视频编辑软件,您可以将 PNG 文件放在视频之上,它的编程更少,因此您的主持人更容易 运行地点。
我用剧院设置制作了一个透明的 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>
您需要 css 声明 background-color: transparent
才能看到透明色上方的视频。此外,您需要 css 声明 position: absolute
将图像和视频都放在顶部。因此,css 规则可能如下所示: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>
如果您愿意,您也可以编辑视频,如果您有视频编辑软件,您可以将 PNG 文件放在视频之上,它的编程更少,因此您的主持人更容易 运行地点。