完整页面的div覆盖模糊不显示

要实现完整页面的div覆盖模糊不显示，可以使用CSS的position属性和z-index属性来控制层级关系。

首先，在HTML文件中创建一个div元素，作为模糊的背景层。然后使用CSS设置该div的样式，包括宽度、高度、背景颜色和模糊效果。

接下来，在HTML文件中创建另一个div元素，作为覆盖在背景层上方的内容层。同样，使用CSS设置该div的样式，包括宽度、高度、背景颜色和位置。

最后，使用CSS的z-index属性来控制内容层的层级比背景层更高，使内容层覆盖在背景层上方。

以下是一个示例代码：

HTML部分：

<div class="background"></div>
<div class="content">
  <!-- 页面内容 -->
</div>

CSS部分：

.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 设置背景颜色和透明度 */
  backdrop-filter: blur(10px); /* 设置模糊效果 */
}

.content {
  position: relative;
  z-index: 1; /* 设置层级比背景层更高 */
  /* 其他样式设置 */
}

在上述代码中，.background类表示背景层，使用position: fixed将其固定在页面上方。设置宽度和高度为100%使其充满整个页面。使用rgba()函数设置背景颜色和透明度，并使用backdrop-filter属性设置模糊效果。

.content类表示内容层，使用position: relative使其相对于背景层定位。使用z-index: 1将其层级设置为1，使其覆盖在背景层上方。

通过以上代码，可以实现一个完整页面的div覆盖模糊不显示的效果。