• CSS中的opacity,不透明度的坑


    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显示为不透明,于是就不透明了!(为什么会有这个想法?因为box1设置字体16px,con1设置字体18px,最终会是con1的设置覆盖box1的设置,是18px)

    但是事实是他们的不透明度不是单独的,不是你设置con1为不透明,于是就针对页面不透明,而是con1针对box1不透明显示后,box1是半透明的,于是又整体半透明了。

    因此,要做出con1下有个投影(不是发光,不是阴影)效果,那么另外一个div需要是它的兄弟节点,而不是父子节点。

    另外,IE6和IE7不支持该属性,用filter:alpha(opacity=50);代替opacity:0.5

    ------------------

    半透明如同玻璃覆盖,比如说,上面的con1背景为红色,box1背景为黄色,红色半透明+黄色=橙色;红色半透明+黄色半透明=橙色的半透明效果,如下图

  • 相关阅读:
    ecshop 整合 kindedotor
    css 一些小笔记
    linux 使用 随记录
    GIPZ 压缩
    js 代码 随记
    map和list循环遍历
    向数据库批量处理事件
    链表和数组的优劣比较
    内存对齐 和 sizeof小结
    C++的默认构造函数与构造函数
  • 原文地址:https://www.cnblogs.com/html55/p/9934538.html
Copyright © 2020-2023  润新知