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则不会被后代元素继承。

    以上。

  • 相关阅读:
    spark,hadoop集群安装注意
    TFRecord 使用
    python 路径引用问题
    flask使用模板
    tensorflow serving 模型部署
    docker使(二)—发布node应用镜像和容器
    docker使用(一)
    tensorBoard使用
    【疑难杂症】访问所有mapper方法都提醒invalid bound statement (not found)
    win10配置jdk12环境变量
  • 原文地址:https://www.cnblogs.com/hjk1124/p/13891467.html
Copyright © 2011-2022 走看看