设置父元素透明度不影响子元素透明度

最新推荐文章于 2023-12-05 09:24:59 发布

weixin_33817333

最新推荐文章于 2023-12-05 09:24:59 发布

阅读量271

点赞数

CC 4.0 BY-SA版权

文章标签：移动开发

原文链接：https://my.oschina.net/u/2612473/blog/2998112

2019独角兽企业重金招聘Python工程师标准>>>

最近做一个加载的loading动画，有一个灰色的遮罩层，当设置opacity透明度的时候，发现里面的子元素也继承了父元素的透明度，即使子元素透明度设置为1也是在父元素的基础上设置的。有什么办法子元素的透明度不影响子元素的透明度呢？

解决方法：采用background ：background:rgba(0,0,0,0.3)的模式

完整的代码：

    <div style="" class="loadingMask">
	<div class="loading">
        <div class="loader circle-line" id="loader">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
			<div>数据正在加载中...</div>
        </div>
    </div>
	</div>

/*loading*/
.loadingMask{display:none;position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.3);z-index:2000;}
.loading {position:absolute;left:50%;top:50%;margin-left:-60px;margin-top:-60px;width:120px;}
.loader {color:#0af9ca;}
.loader span {display: inline-block;width: 8px;height: 30px;border-radius:3px;margin: 3px;background: #29f5cd;-webkit-animation: line-square 1s infinite;}
@-webkit-keyframes line-square {
        0% {
            transform: scaleY(1);
        }
        50% {
            transform: scaleY(.3);
        }
        100% {
            transform: scaleY(1);
        }
}

公众号：前端之攻略

转载于:https://my.oschina.net/u/2612473/blog/2998112