关于background定位

因为项目里需要显示隐藏的按钮上有两个图标，开始想了几种方法都不行，然后突然就想到了background定位，果断试了一下。

<input type="button" class="layui-display-1" value="显示">

  /* 显示隐藏 */
  .layui-display-1{
      background: url(../images/xianshi.png) #49afcd no-repeat 10px center;
      padding-left:10px;
  }
  .layui-display-2{
      background: url(../images/hidden.png) #797979 no-repeat 10px center;
      padding-left:10px;
  }
 .layui-display-1 ,.layui-display-2{
     width: 74px;
     height: 30px;
     color:#fff;
     cursor: pointer;
     border: solid 1px #ddd;
     border-radius: 6px;
     margin-top:1px;
     margin-right:10px;
 }

复制代码

分割线-后续

这个方法在IE浏览器中有点小问题 使用csshack即可解决