背景视频,其作用类似于CSS的元素背景大小,而不是整个页面

Question

我正在尝试编写一个新网站,其中有一个巨大的飞溅背景作为"英雄"图像.就像这个网站有,但作为一个视频,其中的图像是卸载汽车的女士:https://www.simple.com

调整大小,您可以看到图像如何始终适合其父级.

我把一些我一直在JSBin上工作的代码放在这里(没有取得多大进展):http://jsbin.com/ruqisa/1/edit

我似乎无法用CSS获得相同的行为.我希望视频在宽度或高度之外溢出父视图,具体取决于屏幕的尺寸.

有人用纯CSS做过这个吗？JS我可以在调整大小时手动计算它,但我真的很喜欢用CSS做这个.

编辑:我不是在寻找整个页面作为视频,只是标题背景.

Answer 1

让我们采用博客 demosthenes.info 中概述的技术。

选项 1 — 随页面滚动

父div：

• 给定一个固定的高度并且overflow: hidden

视频：

• 被min-width: 100%和拉伸min-height: 100%
• 放在内容后面z-index: -1（可以是任何负数）

要将视频居中：

• top并left设置为50%将左上角放置在父 div 的中间
• 通过将视频向上和向左拖动一半，视频会偏移高度和宽度的一半transform: translateX(-50%) translateY(-50%);

简化示例

这是包含所有标记的完整演示。

body {
  height: 200vh;
  margin: 0;
}
div {
  height: 500px;
  overflow: hidden;
  position: relative;
}
video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  z-index: -1;
  transform: translateY(-50%) translateX(-50%);
}

<div>
  <video autoplay muted loop>
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
  </video>
</div>

2 - 修复了整页背景

视频：

• 不需要包装器，它可以放置在页面的任何位置
• 已创建position: fixed并将自身相对于浏览器窗口（视口）定位
• 被min-width: 100%和拉伸min-height: 100%
• 放在内容后面z-index: -1（可以是任何负数）

要将视频居中：

• top并left设置为50%将左上角置于屏幕中间
• 通过将视频向上和向左拖动一半，视频会偏移高度和宽度的一半transform: translateX(-50%) translateY(-50%);

简化示例

这是包含所有标记的完整演示。

body {
  margin: 0 auto;
  padding: 50px;
  color: #FFF;
  width: 600px;
}
video.background {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
  transform: translateX(-50%) translateY(-50%);
}

<h1>I am content</h1>
<p>I am content too!</p>
<video class="background" autoplay muted loop>
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>