zoukankan      html  css  js  c++  java
  • Live2d Test Env

    问题: 在手写模态框时,给蒙版层设置了透明度,但给其内部的模态框添加不透明背景色时发现虽然有背景色但模态框透明显示
    template:

    /*凭空想象一个弹出框*/
    <view class="rej_mask" catchtouchmove= 'true' v-if="isShowResMask">		
    	<veiw class="rej_showToast">
    	    <view class="rej_head">提示</view>
    	    <view class="rej_body">
    		<view>为什么</view>
    	    </view>
    	    <view class="rej_foot" @tap="closeMask">为什么呢</view>					 
          </veiw>
    </view>			
    

    css:

     // 拒绝后的弹出框
    			 .rej_mask{
    				 position:fixed;
    				 left: 0;
    				 top: 0;
    				 right: 0;
    				  100%;
    				 height: 100%;
    				 z-index: 999;
    				 // background: #000000;
    				 background: rgba(0,0,0,0.7);
    				 // opacity: .7;
    			 }
    			 .rej_showToast{
    				 position: absolute;
    				  77%;
    				 height: 372rpx;
    				 background: rgba(255,255,255,1) ;
    				 border-radius: 12rpx;
    				 left: 50%;
    				 top: 50%;
    				 transform: translate(-50%,-50%);
    			 }
    			 .rej_head{
    				 color: #333;
    				 font-size: 32rpx;
    				 font-weight: bold;
    				  100%;
    				 height: 90rpx;
    				 display: flex;
    				 align-items: center;
    				 justify-content: center;
    				 margin-bottom: -20rpx;
    				 margin-top: 18rpx;
    			 }
    			 .rej_body{
    				  100%;
    				 height: 176rpx;
    				 border-bottom: 4rpx solid #f4f4f4; 
    				 display: flex;
    				 align-items: center;
    				 justify-content: center;
    			 } 
    			 .rej_body>view{
    				 	78%;
    					color: #999999;
    					font-size: 32rpx;
    					text-align: center;
    			 }
    			 .rej_foot{
    				 height: 96rpx;
    				 display: flex;
    				 align-items: center;
    				 justify-content: center;
    				 color: #E02020;
    			 }
    

    原因在于我在给mask蒙版层添加不透明度时用的是opacity而不是rbba导致的,opcity的透明是可以被其后代元素继承的,也就是说在给某个元素添加了opacity属性时,它内部的元素全都继承了这个透明的属性值,所以会导致之前那种状况
    而rgba则不会被后代元素继承。

    以上。

  • 相关阅读:
    返回三级联动的JSON数据
    返回三级联动的JSON数据
    python3访问map
    第十八讲、中介者模式
    第十七讲、命令模式
    第十六讲、模板方法模式
    第十五讲、组合模式
    第十四讲、享元模式
    第十三讲、装饰器模式
    第十二讲、桥接模式
  • 原文地址:https://www.cnblogs.com/hjk1124/p/13891467.html
Copyright © 2011-2022 走看看