元素的层级和背景

z-index

.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); }

  • opacity只能设置0-1之间的数值
  • filter: alpha(opacity=50)兼容IE浏览器
背景(background-image)
.box1{ width: 500px; height: 500px; margin:0 auto; background-color: #0bcd96; background-image: url(../css/logo_new@2x.png); background-repeat:no-repeat; }

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

    推荐阅读