层级背景

.box1{

    width: 200px;

    height: 200px;

    background-color: #0bcd96;

    position:relative;

    z-index:3;

}

.box2{

    width: 200px;

    height: 200px;

    background-color: #1e389a;

    position: absolute;

    left: 100px;

    top: 100px;

}

.box3{

    width: 200px;

    height: 200px;

    background-color: #6a1752;

    position: relative;

    z-index:2;

}

如果没有开启定位的元素或者是定位为默认值，会忽略z-index的声明

父元素的层级再怎么高也不会盖住子元素，可以理解为（水涨船高）

opacity（透明）

.box1{

      width: 200px;

      height: 200px;

      background-color: #0bcd96;

      position:relative;

      opacity: 50%;

      filter: alpha(opacity=50);

  }

  .box2{

      width: 200px;

      height: 200px;

      background-color: #1e389a;

      position: absolute;

      left: 100px;

      top: 100px;

      opacity:0.5px；

      filter: alpha(opacity=50);

  }

  .box3{

      width: 200px;

      height: 200px;

      background-color: #6a1752;

      position: relative;

      opacity: 50%;

      filter: alpha(opacity=50);

  }

背景（background-image）

.box1{

    width: 500px;

    height: 500px;

    margin:0 auto;

    background-color: #0bcd96;

    background-image: url(../css/[email protected]);

    background-repeat:no-repeat;

}