透明度

目前我了解的透明度有4种分别是：rgba，opacity，filter,transparent

• 第一种：rgba(0,0,0,0.2);
  —最后面的参数是透明度的参数：0~1；（1表示不透明，0表示完全透）

background:rgba(255,255,255,0.5);
border: 1px solide rgba(255,255,255,0.5);
color:rgba(255,255,255,0.5);
box-shadow:10px 10px rgba();
……

优点：
1、它可以给任意颜色设置透明度
2、它设置透明度是不会被继承的，就不用考虑继承问题
缺点：
有兼容问题，支持ie9及以上浏览器

• 第二种：opacity：0.5；
  —参数是0~1；(1表示全透，0表示不透)

background:black;
opacity:0.5;

缺点：
设置opacity属性后它的后代元素会随着一起具有透明度
它适应于调整图片或者模块整体透明度

<div class="father" style="background:red opacity=0.5;">		
			<p>背景文字一起透明</p>
		</div>

• 第三种:filter:50;//滤镜这里用的是他的透明度
  ----从字面意思是滤镜，官方定义filter属性定义元素(一般是img)模糊与饱和度，差不多就是照相时候的滤镜，加了它就有不同的效果
  他的属性有很多

filter:none|blur()-模糊|brightness()-亮度|contrast()-对比度|drop-shadow()-阴影|
grayscale()-灰度|hue-rotate()-色相旋转|invert()旋转|opacity()-透明度|saturate()-饱和度|
sepia()-褐色（复古照片感觉）|url();

—参数：0~100

.father{
background:red;
filter:Alpha(opacity=50);
}

• 第四种：transparent；
  -他其实就是rgba：（0，0，0，0）表示全透明黑色

background:transparent;

应用场景：
如果一个元素覆盖在另外一个元素之上，而你想显示下面的元素，这时你就需要把上面这个元素的branckground设置为transparent