关于background定位

直到刚刚我才发现我小瞧了background定位  

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

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

 1 /* 显示隐藏 */
 2 .layui-display-1{
 3     background: url(../images/xianshi.png) #49afcd no-repeat 10px center;
 4     padding-left:10px;
 5 }
 6 .layui-display-2{
 7     background: url(../images/hidden.png) #797979 no-repeat 10px center;
 8     padding-left:10px;
 9 }
10 .layui-display-1 ,.layui-display-2{
11     width: 74px;
12     height: 30px;
13     color:#fff;
14     cursor: pointer;
15     border: solid 1px #ddd;
16     border-radius: 6px;
17     margin-top:1px;
18     margin-right:10px;
19 }

大功告成

 

---

分割线-后续

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