opacity的用法示例如下 opacity设置在元素上的时候,会出现什么效果? 答曰:如果不设置opacity的话,会显示效果为A(可以理解为一个图片),将A按照opacity设置的不透明度,就是得
opacity的用法示例如下
opacity设置在元素上的时候,会出现什么效果?
答曰:如果不设置opacity的话,会显示效果为A(可以理解为一个图片),将A按照opacity设置的不透明度,就是得到的最终效果B。效果之间从最内侧开始推。
举例:
情况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
------------------
半透明如同玻璃覆盖,比如说,上面的con1背景为蓝色,Box1背景为黄色,蓝色半透明+黄色=橙色;蓝色半透明+黄色半透明=橙色的半透明效果