css 蒙版实现 |页面引用css文件路径问题

通过CSS蒙版，大家可以将整个页面的背景置灰，弹出框的内容突显，让用户更加集中注意力。实现这个效果并不难，只需要几行CSS代码即可。

.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.popup {
position: fixed;
top: 50%;
left: 50%;
z-index: 999;
transform: translate(-50%, -50%);
background-color: #fff;
width: 500px;
height: 300px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

上述代码中，大家首先定义了一个名为.mask的CSS类，用于实现蒙版效果。这个div的position属性被设为fixed，可以使它相对于视口固定，并保持在其指定的位置。将width和height设置为100%可以充满整个视口。此外，大家使用了RGBA颜色，通过一定的透明度遮挡页面内容，使得下方的内容看起来有点模糊。

接下来是.popup类的样式，用于设置弹框内容。它也被设为了fixed定位，覆盖在蒙版之上。通过使用translate属性，大家使得弹框始终保持在视口的中心。同时，大家还设置了z-index属性，这样就能够让其在页面上覆盖其他元素。

最后，大家为弹框添加了圆角和阴影效果，使得其看起来更加美观。这些CSS样式的使用，让大家的弹框和蒙版实现了完美的结合，能够在用户使用网站时提供优秀的交互体验。