background

1 <a href="#" class="left">北京市海淀区<span></span></a>

#header a.left {

  width: 5.55rem;
  height: 100%;
  text-align: center;
  color: #fff;
}
#header a.left span {
  display: inline-block;
  width: 0.78333333rem;
  height: 0.36666667rem;

  background: url(../images/ico_01.png) no-repeat right center;

测试::http://www.w3school.com.cn/tiy/c.asp?f=css_background-size&p=8

  background-size: cover;           把背景图像扩展至足够大，以使背景图像完全覆盖背景区域   主要是填充背景区域   有可能图片显示不全  

background-size:contain;           把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域    主要是图片显示完全   但是填充背景有可能                                                    不会全部占满

}

2 <a href="#" class="right"><span>我的</span></a>

#header a.right span {
  height: 0.6rem;
  line-height: 0.6rem;
  color: #fff;
  display: inline-block;
  padding-left: 0.76666667rem;
  background: url(../images/ico_03.png) no-repeat;
  background-size: 0.6rem 0.6rem;

}

3 <input type="text" value="输入店铺、商品等" />

#header input {

  float: left;
  width: 9.21666667rem;
  height: 1.55rem;
  font-size: 0.6rem;
  border-radius: 0.43333333rem;
  box-sizing: border-box;
  border: none;
  color: #e2c2c9;
  text-indent: 1.66666667rem;
  background: #ae3e56 url(../images/ico_02.png) no-repeat 0.43333333rem 0;
  background-size: 1.03333333rem 1.55rem;
}

把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。