html页面中引入视频菜单背景,html – 背景视频,其作用类似于CSS’元素的背景大小封面,而不是整个页面...

让我们适应技术

outlined on the blog demosthenes.info.

选项1 – 滚动页面

父div：

>给出一个固定的高度和溢出：隐藏

该视频：

>以最小宽度拉伸：100％和最小高度：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%);

}

2 – 修正了整页背景

该视频：

>不需要包装器,它可以放在页面的任何位置

>被定位：固定并将自己定位于浏览器窗口(视口)

>以最小宽度拉伸：100％和最小高度：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%);

}

I am content

I am content too!