0%

opacity和visiblity

Posted on Edited on In
  • opacity:设置父元素隐藏，设置子元素显示将失效
  • visiblity:设置父元素隐藏，设置子元素显示将成功
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    .item1 {
        width: 400px;
        height: 400px;
        padding: 100px;
        box-sizing: border-box;
        background-color: green;
        text-align: center;
        /*opacity: 0;*/
        visibility: hidden
    }
    .item2 {
        width: 200px;
        height: 200px;
        background-color: fuchsia;
        /*opacity: 1;*/
        visibility: visible
    }
    <div class="item1">
        <div class="item2"></div>
    </div>