小程序modal固定定位居中显示解决父元素透明度被子元素继承问题

最新推荐文章于 2025-05-15 16:50:06 发布

原创最新推荐文章于 2025-05-15 16:50:06 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了使用CSS实现弹窗样式的具体方法，包括如何设置背景颜色、透明度及定位等关键属性，使读者能够快速掌握并应用到实际项目中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.modal-mask{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    /*background: #000000;*/   //这样设置透明度会被子元素继承
    /*opacity:0.5;*/
    background: rgba(0,0,0,.7);  //z这样设置解决透明度被子元素继承问题
    overflow: hidden;
    color: #ffffff;
    z-index:900;
}
.modal-dialog{
    background-color: #f9f9f9;
    /*background: rgba(0,0,0,.7);*/
    opacity: 0.95;
    position: fixed;
    z-index: 999;
    top: 50%;
    left: 50%;
    margin-left: -270rpx;    // 固定定位 上左各50%   弹窗设置固定宽度 左外边距设置-宽度上午一半  可居中显示
    overflow: hidden;
    width: 540rpx;
    text-align: center;
    color: #000;
    border-radius: 26rpx;
}