CSS 将视频设置为背景“图像”的方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4958763/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ways to set up a video as a background 'image'
提问by Toni Michel Caubet
I need to set up a website with a video as the background.
我需要建立一个以视频为背景的网站。
Will I be able to use z-indexto position other elements on top of the video? Is there a better alternative?
我可以用来z-index在视频顶部放置其他元素吗？有更好的选择吗？
回答by Marcx
I have not tested it, but you could try to set width/height of <video>to 100%then using z-index let all the others element stay on top of it...
我还没有测试过，但是您可以尝试将宽度/高度设置为<video>to100%然后使用 z-index 让所有其他元素保持在它之上...
Edit: for example to set video as background entire page
编辑：例如将视频设置为整个页面的背景
<body style="height: 100%;width: 100%">
<div style="position: fixed; top: 0; width: 100%; height: 100%; z-index: -1;">
<video src="" width="100%" height="100%" autoplay>
Your browser does not support the video tag.
</video>
</div>
... rest of your site
回答by atrljoe
You can not apply it as a CSS background (background property). You can give the effect though using layers which is controlled via the z-index property.
您不能将其用作 CSS 背景（背景属性）。您可以使用通过 z-index 属性控制的图层来提供效果。
回答by Myles Gray
If you are using flash as your video playing method no - flash is ALWAYS on top of anything regardless of z-index, But I imagine this could be done by using the new HTML5 <video>tag.
如果您使用 Flash 作为您的视频播放方法，则不 - 无论 z-index 如何，Flash 始终位于任何内容之上，但我想这可以通过使用新的 HTML5<video>标签来完成。
Failing that convert to a high-frame rate animated image and set as BG...
失败转换为高帧率动画图像并设置为BG ...
