CSS把视频设为背景模式,不运用中间固定不动,但不运用自适应容器大小
时间: 2024-01-18 10:03:09 浏览: 81
如果你不想让视频在中间固定不动,可以将视频的位置设置为相对定位,然后在CSS中设置背景大小和背景位置,如下所示:
```html
<div class="video-container">
<video autoplay loop muted>
<source src="yourvideo.mp4" type="video/mp4">
</video>
</div>
```
```css
.video-container {
position: relative;
width: 800px;
height: 600px;
overflow: hidden;
}
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-size: 800px 600px;
background-position: center;
}
```
这里的position: relative;属性可以将视频容器设置为相对定位,然后使用width和height属性来指定容器大小。video标签的位置设置为绝对定位,并将宽度和高度设置为100%,这样视频就可以完全覆盖容器。然后,使用background-size和background-position属性来设置背景大小和背景位置,这样视频就可以作为容器的背景,而不会被固定在中间。
相关问题
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%);
width: 800px;
height: 600px;
z-index: -1;
background-size: 800px 600px;
}
```
这里的width和height属性可以设置视频的宽度和高度,background-size属性也要设置为相同的宽度和高度,这样视频就不会自适应容器大小,而是被固定在指定的大小并在中间固定不动。
CSS把视频设为背景模式在中间固定不动,
要将视频设置为背景并让它在中间固定不动,可以使用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属性将其置于容器的中心位置,这样视频就可以在中间固定不动。
阅读全文