• 利用CSS背景颜色属性使父级div背景透明同时避免子级标签透明。


    实现背景色透明效果的代码

    • 实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性。
    • 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及CSS3中的rgba属性之间进行十六进制与十进制的换算。
    • 增加对IE9浏览器中的滤镜取消效果
    • ★ 鉴于需要做浏览器的hack,使用了:root来让IE9以前的浏览器不支持效果,所以增加了一个需要添加选择符类名的方式,对于这块需要大家在后期添加样式到代码中做单独的处理
    • 把CSS代码中的background修改为background-color,只针对背景颜色来操作。

    案例:如下

     <div class="modal-backdrop "><span>数据提交中....</span></div>   
     
     外面的div设置了为透明  如何避免里面的span不透明呢 
     
    通常情况下,我们可能会设置外面的div为opacity,这样会导致span也会透明。
     
    解决方案:
     
    .outer {
       100px;
      height: 100px;
      background-color: rgba(0,0,0,.6);
    }
    
    .inner {
       50px;
      height: 50px;
      background-color: rgba(255,255,255,1);
    }

    通过rgba 来设置 父级div 背景有颜色为透明即可。

    其中a代表的就是alpha

    弊端:

    rgba里面a是代表alpha,就直接设置颜色的透明,但是这个仅限于用在单色上,如果div里是图片就会有问题了~

  • 相关阅读:
    软工1816 · 第四次作业
    Alpha 冲刺 (3/10)
    Alpha 冲刺 (2/10)
    Alpha 冲刺 (1/10)
    软工 第七次作业
    软工实践第八次作业
    软工实践第六次作业——团队选题报告
    软工实践第二次结对作业(作业五)
    软工第四次作业
    软工实践第三次作业
  • 原文地址:https://www.cnblogs.com/hailun/p/6248859.html
Copyright © 2020-2023  润新知