CSS把视频设为背景模式在中间固定不动,
时间: 2023-12-05 14:03:12 浏览: 197
要将视频设置为背景并让它在中间固定不动,可以使用CSS的background属性和background-size属性来实现。首先,将视频嵌入到一个div容器中,如下所示:
```html
<div class="video-container">
<video autoplay loop muted>
<source src="yourvideo.mp4" type="video/mp4">
</video>
</div>
```
这里的video标签中的autoplay、loop和muted属性分别表示自动播放、循环播放和静音。接下来,在CSS中设置div容器的背景为视频,并将背景大小设置为cover,这样视频可以完全覆盖容器,并且可以自适应容器大小。同时,设置背景位置为中心,这样视频就可以在中间固定不动。CSS代码如下:
```css
.video-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
}
.video-container video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
background-size: cover;
}
```
这里的position: fixed;、top: 0;、left: 0;、width: 100%;、height: 100%;和z-index: -1;属性可以将视频容器固定在页面的顶部,并使其覆盖所有其他元素。另外,background-size: cover;属性可以将视频自适应容器大小,并保持比例不变。最后,video标签的位置设置为绝对定位,并使用transform属性将其置于容器的中心位置,这样视频就可以在中间固定不动。
阅读全文