销户系统多券商开发
1.客户需要做一个挽留的modal,由于只有这家券商需要,暂时不封装成组件。写一个遮罩到页面即可
写在最外层并使用fixed布局即可
<div class="img-modal">
<img src="./assets/img/the-first.png" alt="" class="mask-img">
</div>
样式注意写高度匹配
.img-modal{
width: 100%;
height: calc( 100vh - 90px );
opacity: 0.6;
background-color: black;
bottom: 0;
left: 0;
position: fixed;
z-index: 998;
}
.mask-img{
width: 520px;
height: 680px;
opacity: 1;
z-index: 999;
position: fixed;
top: 200px
right: 114px;
}
2.但是发现祖先的透明度这样设置会影响到子元素,并且子元素无法改变透明度。所以要采用其他办法:
改变父元素的透明度,不影响子元素的透明度—css
简单来说就是使用父元素的透明度用rgba的方法
background:rgba(0,0,0,0.4);