zoukankan      html  css  js  c++  java
  • 利用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里是图片就会有问题了~

  • 相关阅读:
    VPython—旋转坐标系
    分布式锁简单入门以及三种实现方式介绍
    win10 64bit安装redis及redis desktop manager的方法
    Kafka史上最详细原理总结
    idea常用快捷键
    十大Intellij IDEA快捷键
    Spark(一): 基本架构及原理
    Idea Live Templates代码模板
    IntelliJ IDEA 常用快捷键列表及技巧大全
    Win10 下 RabbitMQ 的 安装 配置
  • 原文地址:https://www.cnblogs.com/hailun/p/6248859.html
Copyright © 2011-2022 走看看