zoukankan      html  css  js  c++  java
  • CSS中不透明度继承问题的处理

    关于CSS中不透明度的设置,除了兼容方面的问题,还有不透明度继承问题,这里只讨论下后者。

    那么,

    什么时候会发生不透明度继承问题?

    当文档结构中有父子嵌套关系的时候,并且父元素有不透明度属性设置时,会发生不透明度继承问题,此时子元素也继承了父元素的不透明度,并且再另外设置子元素不透明度是无效的(如果父元素没有设置不透明度,子元素的设置是有效的)。

    下面是相关代码和效果图:

    CSS部分:

    #parent{
        height:400px;
        width:500px;
        background:green;
        opacity:0.3;
        filter:alpha(opacity=30);/*兼容IE5.5 IE7 IE8,在IETester下测试IE6并不支持*/
        -moz-opacity:0.3;/*一些老版本Mozzila*/
        -khtml-opacity:0.3;/*一些老版本Safari*/
    }
    #child{
        height:100px;
        width:100px;
        background:red;
    }

    DOM结构部分:

    <div id="parent">
        <div id="child"></div>
    </div>

    效果图:
    图一            图二

    图一为设置不透明度后的效果,图二为没设置透明度的效果,可以看到,子元素child也具有了一定的透明度。

    在实际应用中,我们有时希望的去是让底层看起来有透明效果,而让上层的元素仍为不透明。

    那么,

    该怎么解决?

    1、使用具有透明效果的图片来代替background效果。

    2、将父子元素的嵌套关系改为兄弟关系,并用绝对定位及z-index来实现。

    如果还有其他方法的话,积极留言哟~

  • 相关阅读:
    中国剩余定理
    exgcd(扩展欧几里得)求同余式
    hdu 4557 :非诚勿扰(vector + 二分)
    ZOJ 1094:Matrix Chain Multiplication(栈)
    ZOJ1004: Anagrams by Stack(dfs + 栈模拟)
    洛谷 P1038 :神经网络(BFS && 拓扑排序)
    51Nod 1459:迷宫游戏(Dijkstra)
    51 Nod 1640: 天气晴朗的魔法(Krustra 并查集)
    打印文件中的内容
    print directory(打印目录)
  • 原文地址:https://www.cnblogs.com/aaron-shu/p/4095930.html
Copyright © 2011-2022 走看看