案例：在滚动条下拉的时候，导航栏是固定的，当下拉卷出的内容在导航条的范围内时，导航条的背景虚化为卷出的内容
固定定位的效果
需求效果：
1、HTML代码
<style>* {margin: 0;padding: 0;}nav {/* 固定定位 */position: fixed;width: 100%;height: 60px;}nav h3 {text-align: center;line-height: 60px;}.box {padding-top: 60px;width: 100%;height: 800px;}</style>
</head><body><nav><h3>导航栏</h3></nav><div class="box"><imgsrc="https://note.mafengwo.net/img/e1/fb/3d3ff2df501ac0f77724e0a954b9f441.jpeg?imageMogr2%2Fthumbnail%2F1360x%2Fstrip%2Fquality%2F90"alt=""></div></body>2、给导航条添加样式
nav {/* 固定定位 */position: fixed;width: 100%;height: 60px;/* 给导航条添加以下效果 *//* 1、径向渐变 */background-image: radial-gradient(transparent 2px, #ffffff 2px);/* 2、背景缩放 */background-size: 4px 4px;/* 3、元素后面的区域添加：饱和度 和 模糊效果 */backdrop-filter: saturate(50%) blur(2px);}
