opacity的用法示例如下
/* 值是0到1之间的数值 */ opacity:0.5
opacity设置在元素上的时候，会出现什么效果？
答曰：如果不设置opacity的话，会显示效果为A（可以理解为一个图片），将A按照opacity设置的不透明度，就是得到的最终效果B。效果之间从最内侧开始推。
举例：
1 <div class="box1"> 2 <div class="con1"> 3 我是文字 4 </div> 5 </div>
情况1，如果设置box1不透明度0.5，显示效果就是文字也是半透明的。
情况2，如果设置box1不透明度0.5，con1不透明度1，整体和上面一样是半透明的。
情况3，如果设置box1不透明度0.5，con1不透明度0.5，那就是con1先0.5后，box1再0.5不透明度显示效果。
-------------------
我曾经想，box1不透明度0.5，但con1设置为1显示为不透明，于是就不透明了！
但是事实是他们的不透明度不是单独的，不是你设置con1为不透明，于是就针对页面不透明，而是con1针对box1不透明显示后，box1是半透明的，于是又整体半透明了。
因此，要做出con1下有个投影（不是发光，不是阴影）效果，那么另外一个div需要是它的兄弟节点，而不是父子节点。
另外，IE6和IE7不支持该属性，用filter:alpha(opacity=50);代替opacity:0.5
原文：https://www.cnblogs.com/html55/p/9934538.html