工具计算（PS或者FW）
以fw为例，按照2倍图缩放
1.导入图片后，选中图片，下方显示整张图片的尺寸大小（208x655）
2.修改宽大小为原来的一半：104
回车
3.测量图标大小（23x23），坐标为（59x194）
相关代码
<body>
<div class="search-index">
<div class="search">
<input type="text" placeholder="请输入关键词进行搜索">
</div>
<a href="#" class="user">我的</a>
</div>
</body>
css
body {
max-width: 540px;
min-width: 320px;
margin: 0 auto;
font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
color: #000;
background: #f2f2f2;
overflow-x: hidden;
-webkit-tap-highlight-color: transparent;
}
.search-index{
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
min-width: 320px;
max-width: 540px;
height: 44px;
background-color: pink;
display: flex;
}
.search{
width: 100%;
flex: 1;
}
.user{
width: 44px;
height: 44px;
text-align: center;
color: #f2f2f2;
}
.user::before{
/* 给元素设置伪元素的时候，必须设置其content属性，浏览器才会将这些元素插入到选择的元素中。该值可以设置为空字符串：content: "" */
content: "";
/* 行内元素转为块元素 */
display: block;
width: 23px;
height: 23px;
background: url(../images/sprite.png) no-repeat -59px -194px;
/* 缩放精灵图 */
background-size: 104px auto;
margin: 0 auto;
}
/* 去除下划线 */
a{
text-decoration: none;
}
标签：处理,auto,元素,精灵,content,width,background,color From： https://www.cnblogs.com/ixtao/p/17644799.html