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 背景将在垂直方向重复
