不改变透明度来让元素显的透明

不透明度（opacity）属性可以让元素显得透明，这样使用会有负面的影响，尤其是在嵌套元素里。css3解决这个问题。

.opacity{

     opacity:.5;

}

 

每个包含在opacity类内的子元素都会有50%的不透明度。这样继承性是我们无法改变和重设的。

<div class="opacity">
    <p class ="opacity"> this is text</p>
</div>

这个例子中，文字的不透明度会被渲染为.25或25%,因为它对父元素的不透明度继承里两次,有时候继承特性是很有用的，但是有时候它会带来无法规避的问题。

 

关于alpha透明度的介绍

新的alpha透明度可以在设置颜色的同时设置透明度，它可以是一个背景颜色，一个渐变，一个投影或者任何有颜色的属性。

它只会影响颜色本身，而不会影响子元素的样式

.opacity{
    background-color:rgba(1,1,1,.8);
}

注意：只当前元素。