我想在 CSS3 中使用视频作为背景。我知道没有背景视频属性，但是是否可以执行此行为。使用全尺寸视频标签不会给出想要的结果，因为需要在视频上显示内容。
它必须是非 JS。如果不可能，那么我需要在服务器端进行更改，并给出视频的屏幕截图。
我需要视频来替换彩色框：
彩色框只是 atm，CSS 框。
纯CSS方法
可以将视频置于元素的中心，就像cover sized background-image 没有JS使用object-fit属性或CSS Transforms.
2021答案：对象拟合
正如评论中指出的，无需任何操作即可获得相同的结果CSS transform，但是使用object-fit，我认为对于相同的结果这是一个更好的选择：
.video-container {
height: 300px;
width: 300px;
position: relative;
}
.video-container video {
width: 100%;
height: 100%;
position: absolute;
object-fit: cover;
z-index: 0;
}
/* Just styling the content of the div, the *magic* in the previous rules */
.video-container .caption {
z-index: 1;
position: relative;
text-align: center;
color: #dc0000;
padding: 10px;
}
<div class="video-container">
<video autoplay muted loop>
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
</video>
<div class="caption">
<h2>Your caption here</h2>
</div>
</div>
上一个答案：CSS 变换
您可以轻松地将视频设置为任何 HTML 元素的背景，这要归功于transformCSS 属性。
请注意，您可以使用transform垂直和水平居中技术anyHTML 元素。
.video-container {
height: 300px;
width: 300px;
overflow: hidden;
position: relative;
}
.video-container video {
min-width: 100%;
min-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
/* Just styling the content of the div, the *magic* in the previous rules */
.video-container .caption {
z-index: 1;
position: relative;
text-align: center;
color: #dc0000;
padding: 10px;
}
<div class="video-container">
<video autoplay muted loop>
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
</video>
<div class="caption">
<h2>Your caption here</h2>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
