将视频设置为背景“图像”的方法答案

【问题标题】：Ways to set up a video as a background 'image'将视频设置为背景“图像”的方法
【发布时间】：2011-06-24 22:21:39
【问题描述】：

我需要建立一个以视频为背景的网站。

我能否使用z-index 将其他元素放置在视频顶部？有没有更好的选择？

【问题讨论】：

不正确吗？我是西班牙人..有人问我？ :P
“他们”很少使用，除非明确“他们”是谁。如果你说，“我刚刚和负责人交谈，他们问我……”那将是正确的，因为可以理解“他们”是谁——“负责人”。这并没有让人觉得你的英语不好，但它有点不寻常……对无法识别“他们”是谁的一种解释可能是你对“他们”有如此多的蔑视你甚至不想确定“他们”是谁。
所以，我再问一次。更好的是“有人问我是否..”？
“我被问到是否可以”或“我被问到”会很好。不要为此感到难过...大声笑...每个人都明白你想说什么。

标签： css flash

【解决方案1】：

我还没有测试过，但您可以尝试将<video> 的宽度/高度设置为100%，然后使用 z-index 让所有其他元素保持在上面...

编辑：例如将视频设置为整个页面的背景

<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

【讨论】：

w3schools.com/html5/html5_video.asp btw for ie 不支持，但你可以使用 ogg 用于 firefox 和 opera，MPEG4 用于 safari，chrome 两者都接受

【解决方案2】：

如果您使用 Flash 作为您的视频播放方法，否 - 无论 z-index 是什么，Flash 总是在任何东西之上，但我想这可以通过使用新的 HTML5 <video> 标签来完成。

转换为高帧率动画图像并设置为 BG 失败...

【讨论】：

-1 "flash 总是在任何东西之上" - 错误。如果您使用 wmode=transparent，您可以将 flash 定位在任何 z-index 上，并允许在 flash 容器上方或下方进行渲染。
啊，谢谢你，我不知道，我总是被告知 flash 会忽略 z-index。
湿漉漉的，wmode=transparent会不会负载很多CPU？
@Toni Michel Caubet - 是的 - 在不同的操作系统上有各种报告的错误报告在打开设置时 CPU 负载增加。
通常不应考虑或建议不要考虑或建议使用 CPU/系统密集型而另一种更轻量级的选项。

【解决方案3】：

您不能将其应用为 CSS 背景（背景属性）。您可以使用通过 z-index 属性控制的图层来提供效果。

【讨论】：