如何将视频设置为背景“图像”

Question

如何将视频设置为背景“图像”

cssflash

9

我需要将一个视频作为背景来建立一个网站。

我能使用z-index来定位其他元素在视频上方吗？是否有更好的替代方案？

- Toni Michel Caubet

这不正确吗？我是西班牙人...有人问我？ :P - Toni Michel Caubet

"They" 很少使用，除非清楚知道 "they" 指的是谁。如果你说了，“我刚刚和负责人们交谈，他们让我......”，那就是正确的，因为我们可以理解 "they" 是指 "负责人们"。这并不会让你显得英语不好，但有点不寻常...... 没有说明 "they" 是谁可能有一种解释是，你对 "他们" 的蔑视如此之深，以至于你甚至不想说明 "they" 是谁。 - TimFoolery

所以，我再问一遍。"I've been asked if.." 更好吗？ - Toni Michel Caubet

“我被问到是否可以”或“我被要求”都可以。不要感到难过...哈哈...大家都明白你想说什么。 - TimFoolery

3个回答

2

你不能将它应用为CSS背景（background属性）。不过你可以使用层来实现这种效果，通过z-index属性进行控制。

- atrljoe

0

如果您正在使用 Flash 作为视频播放方法，那么无论 z-index 如何，Flash 都始终位于所有内容的顶部。但我想这可以通过使用新的 HTML5 <video> 标签来实现。

如果不行，可以将其转换为高帧率动画图像并设置为背景...

- Myles Gray

3

“flash is ALWAYS on top of anything”这个说法是错误的。如果你使用wmode=transparent参数，你可以将Flash定位在任何z-index上，从而允许其在Flash容器之上或之下渲染其他内容。 - Damp

啊，谢谢你提供这个信息，我之前不知道。一直以来我都听说 Flash 会忽略 z-index。 - Myles Gray

阻尼，wmode=transparent 是否可能会导致 CPU 负载过高？ - Toni Michel Caubet

1

@Toni Michel Caubet - 是的 - 有报道称在打开该设置时，不同操作系统存在各种报告的错误，导致CPU负载增加。 - easwee

一般情况下，如果有更轻量级的选项可用，就不应该考虑或建议使用任何占用CPU/系统资源过多的东西。 - Myles Gray

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Marcx · Accepted Answer

我还没有测试过，但你可以尝试将<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