rgba和opacity的区别及应用

来源：互联网发布：传奇霸业魔麒麟数据编辑：程序博客网时间：2024/06/08 09:16

一、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

阅读全文

0 0