我想放置一个 100% 宽度和 100% 高度的 html5 视频（当然带有 video 标签），该视频将在后台播放。这是一个带有图像的示例，我想要与视频完全相同的示例，我只是不知道如何做到这一点：
#image {
background-image: url("image.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
JSFiddle：http://jsfiddle.net/u9ncpyfu/ http://jsfiddle.net/u9ncpyfu/
您可以尝试：
header {
position: relative;
background-size: cover;
background-position: 50% 50%;
height: 100vh;
z-index: 0;
}
header h1 {
text-align: center;
font: 3em/1.4 helvetica neue, helvetica, arial, sans-serif;
color: #fff
}
header video {
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
}
<header>
<h1>Sample Title</h1>
<video autoplay loop class="bg-video">
<source src="https://d2v9y0dukr6mq2.cloudfront.net/video/preview/abstract-rainbow_wjpctkdes__PM.mp4" type="video/mp4">
</video>
</header>
It will 保持宽高比和视频居中，同时始终完全覆盖容器.
这是一个小提琴工作示例。 http://jsfiddle.net/2jyLnm3L/
希望能帮助到你 ：）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
