CSS中的opacity,不透明度的坑

前端开发 作者: 2024-06-14 17:10:01
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背景为黄色,蓝色半透明+黄色=橙色;蓝色半透明+黄色半透明=橙色的半透明效果

原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_27032.html