CSS的坑（2）之透明度属性

在我们设置背景色透明的时候经常用到opacity属性，它非常方便的可以设置背景透明度可以设置从0（不显示）到默认值1的数值。

opacity属性实现
HTML

<div class="box1">
			<div class="box2"></div>
			<span>我变透明了</span>
		</div>

CSS

           .box1{
				width: 100px;
				height: 100px;
				background: green;
				opacity: 0.5;
				/* 设置透明度为0.5 */
			}
			.box2{
				width: 50px;
				height: 50px;
				background:yellow;
			}
			span{
				font-size: 20px;
				font-weight: bold;
				/* 字体加粗 */
			}

效果：

但是当我们在父元素添加opacity属性后子元素的文字或者子元素的盒子会受到到影响。

这时可以用background:rgba()属性设置背景透明度，这个元素只会设置当前元素的背景颜色和透明度，不会影响到包含的内容。

background:rgba() 属性实现
HTML

<div class="box1">
			<div class="box2"></div>
			<span>我还是我</span>
		</div>

CSS

			.box1{
				width: 100px;
				height: 100px;
				background: rgba(0,0,0,0.5);
				/*  设置黑色，透明度为0.5 */
			}
			.box2{
				width: 50px;
				height: 50px;
				background:yellow;
			}
			span{
				font-size: 20px;
				font-weight: bold;
			}

效果：

这里可以看到父元素设置background:rgba()属性，只有自己本身的背景色和透明度改变，它所包含的内容没有被影响

background:rgba()： rgb就是颜色面板里的红色（R）绿色（G）蓝色（B），a就是透明度，它的数值和opacity属性一样从0到1。

当然这个background:rgba()数值只能设置背景透明，不能设置文字透明，如果想设置文字透明可以单独给opacity属性。

总结：opacity属性具有继承性，添加后会影响包含元素的透明度，可以设置文字和背景的透明度。background:rgba()属性，不具有继承性，只会影响自身的背景色和透明度，对文字不起作用。