css3加黑色遮罩

CSS3提供了丰富的样式特性，其中之一是加入黑色遮罩。

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;
}
    

上述代码中的.overlay类指定了一个定位为固定位置（fixed），覆盖页面全屏的元素。黑色遮罩的颜色通过rgba(r, g, b, a)指定，其中r、g、b是红、绿、蓝三原色的值，而a是alpha的缩写，用于控制透明度（0表示完全透明，1表示完全不透明）。

通过z-index属性指定元素的堆叠顺序，使黑色遮罩显示在页面上层。

使用黑色遮罩可以遮挡掉页面中某些不需要显示的元素，制造出更好的用户体验。例如，当用户点击弹出式菜单时，页面上的其他元素可以被遮挡，而菜单可以更加醒目地呈现在用户面前。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！