第二十八章、背景弱化

阴影弱化

通常实现遮罩层是使用两个元素

<div class="wrap">  //遮罩层
    <div class="con">  //主内容层
        
    </div>
</div>

.wrap{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,.8);
}

配合固定定位或者页面没有滚动时，可以是用box-shadow方案来消除额外的HTML元素

<div class="con">  //主内容层

</div>

.con{
    position: fixed;
    box-shadow: 0 0 0 9999px rgba(0,0,0,.8);  // 给一个巨大的扩张半径，让阴影来实现遮罩
}

box-shadow方案的缺陷在于无法防止鼠标与页面发生交互，只能在视觉上起到遮罩的作用

模糊弱化

将网页上其他内容都用一个元素包裹起来，与弹出框形成兄弟元素，对这个元素使用滤镜

<main class="wrap">
    //主内容
</main>
<div class="con">
  //弹出框
</div> 

main.wrap{   //通过JS给main元素添加wrap类就可以实现模糊效果
    filter:blur(5px);
    transtion: .5s filter  // 模糊可以使用CSS3渐变实现动画
}
.con{
    position: fixed;
}