一、rgba和opacity的区别
话不多说，先看代码，同样设置背景透明度，写法1：
background: rgb(0,0,0);
opacity: 0.5;
写法2： background: rgba(0,0,0,0.5);
不同之处在于，opacity属性的值，可以被其子元素继承，给父级div设置opacity属性，那么所有子元素都会继承这个属性，而RGBA设置的元素的后代不会继承该属性及属性值。
二、opacity和rgba属性的应用：
页面上要显示pop弹窗时，弹窗后面需要有一个mask遮罩遮住页面的内容,这个时候可以将遮罩div放在内容的同级
<body>
<div id="wrap">内容区域</div>
<div class="pop"></div>
<div class="mask"></div>
</body>.mask{
position : fixed;
width: 100%;
height: 100%;
z-index : 99;
background : #000;
opacity : 0.5;
top : 0;
left : 0;
}由于遮罩和内容区域是在同一级div上，而且设置了position属性值及层叠属性z-index，所以不管是用opacity还是rgba,都可以实现透明遮罩完全遮盖内容区域
在平时应用中，如果需要元素背景，以及元素里面的文字、子元素的文字等等有透明效果，则用opacity属性，只需要背景的透明色，则对背景设置rgba
1564
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
