zoukankan      html  css  js  c++  java
  • CSS实现父元素半透明,子元素不透明

    CSS实现父元素半透明,子元素不透明。 很久以来大家都习惯使用opacity:0.5在新式浏览器里实现半透明,而对IE较旧的版本使用filter:Alpha(opacity=0.5)的滤镜来实现半透明。但是这样实现的半透明有个问题,那就是这个属性会被子元素所继承。

    如下代码,则子元素中也将是半透明效果,无论你将子元素的半透明值重置还是如何都不会改变这一情况。

    .parent{opacity:0.5; background-color:#fff;}
    .child{opacity:1.0; background-color:#fff; height:200px;}

    HTML:

    <div class="parent">
        <div class="child">哈哈哈</div>
    </div>

    其实在新的CSS3规则里面的属性 GRBA已经可以方便的实现父元素透明,而子元素不透明了。 如下代码

    <div class="parent" style="background:rgba(255,255,255,0.5)">
        <div class="child" style="height:200px; background-color:red">哈哈哈</div>
    </div>

    但是对于IE6~8方面就无法兼容了,可以适当的降级。 如果一定要兼容的话只能考虑使用绝对定位的,看上去是包含关系的两个层,其实是兄弟关系,使用JS来控制其位置的呈现,这种具体就不再陈述了,网上解决方案很多。

  • 相关阅读:
    SDOI2020游记
    Git和GitHub详解
    P1251 餐巾计划问题
    P2824 [HEOI2016/TJOI2016]排序
    P3224 [HNOI2012]永无乡
    P3605 [USACO17JAN]Promotion Counting晋升者计数
    P4314 CPU监控
    P2939 [USACO09FEB]改造路Revamping Trails
    P4254 [JSOI2008]Blue Mary开公司
    P1772 [ZJOI2006]物流运输
  • 原文地址:https://www.cnblogs.com/aleafo/p/3696519.html
Copyright © 2011-2022 走看看