网页实现沉浸式导航栏（导航栏包含在视频或图片中）

话不多说，两种实现思路如下

(听说转载要注明出处）：

记下了几个最好需要了解的点：

overflow: hidden; z-index: -100; position: absolute;

background-position: center 0; background-attachment: fixed; background-size: cover;

margin-left:0px; margin-right:0px;

这里放几个了解这些属性的链接：

1.https://www.w3school.com.cn/cssref/pr_pos_overflow.asp

2.https://zhidao.baidu.com/question/395257709.html

3.https://blog.csdn.net/wzj2584454/article/details/78100233

1.将大容器尺寸固定，背景充满大容器，导航栏的文字内容设置绝对定位属性，使其悬浮在背景上方(需要理解下position属性，不懂请百度)：

页面结构：header包裹着 header-bg(背景)-header-top（导航文字）

<header class="header">
		<div class="header-bg">  
			<div class="videocontainer"> 
				<video width="100%" id="video" autoplay="" loop="" preload="" muted="" x-webkit-airplay="true" airplay="allow" webkit-playsinline="true" playsinline="true" src="../video/st01.mp4" class="video1 video">
				</video>
	        </div>
        </div>
        <div class="header-top"></div>
</header>

css的样式：

.header {
  position: relative;
  width: 100%;
  height: 560px;
}
.header-bg{	
  margin-left:0px;
  margin-right:0px;
  width: 100%;
  height: 560px;
  /*background: url(../images/header_bg.png)  ; /* no-repeat center 0*/*/
  background-attachment: fixed;
}
.header-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 48px;
}

2.与1相反，想必你已经想到反其道而行之，大容器尺寸固定，导航栏文字充满大容器，将背景设置绝对定位属性（ 可能需要用到前面给出的 z-index: -100; ），这里不再尝试。

注意！！！

都应该将最大的div容器与充满它的div容器设置好尺寸，以免影响网页下面内容显示（可能会出现页面导航以外的主题内容依旧出现背景内容中，就很尴尬。），还有就是如果你直接复制我的代码，请注意video的路径问题。

话说我太爱视频背景了，沉浸效果巨爽！hhhh,第一次写这样的博客，觉得有帮助到你的话，请多多支持，点赞评论呢，谢谢！