元素的层级和背景

z-index

    .box1{
             width: 200px;
             height: 200px;
             background-color:#obcd96;
             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;
              }

• 如果没有开启定位的元素或者是定位为默认值，会忽略z0index的声明
• 父元素的层级在怎么高也不会盖住子元素，可以理解为(水涨船高)

---

opacity(透明)
.box1{
width:200px;
height:200px;
background-color:#0bcd96;
position:relative;
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);
}

• opacity只能设置0-1之间数值
• filter： alpha(opacity=50)兼容IE浏览器

---

背景(background-image)

    .box1{
                width:500px;
                height:500px;
                margin:0 auto;
                background-color:#0bcd96;
                background-image:url(图片)
                background-repeat:no-repeat;
            }

• background-repeat:no-repeat 图片只能显示一次
• background-repeat:repeat-x 背景将在水平方向重复
• background-repeat:repeat-y 背景将在垂直方向重复