提升移动端小图标的用户点击体验区域小技巧

提升移动端小图标的用户点击体验区域

问题描述

移动端如果使用精灵图作为背景图标素材排版时，为了只显示对应的图标，会把显示图标的容器元素宽高设置成图标大小，方便显示对应的图标。但由于图标尺寸比较小，需要在对应位置增加点击事件时，经常会无法准确点击或误触碰相邻的元素，这样会造成用户体验效果极差（如下图的）。最近在学习css3时，发现设置背景裁剪属性（background-clip：content-box）可以解决该问题。

实现原理

通过设置显示元素的边框或内边距，同时设置背景裁剪属性，达到增加显示元素的总体面积的效果。最终实现，点击以下白色区域均可以触发点击事件。当然，随着字体图标的应用，可以使用字体图标方式解决。

• 设置背景图片裁切效果图如下：

• background-clip:border-box 从border的位置开始显示内容
  

• background-clip:padding-box;从padding的位置开始显示内容
  

• background-clip:content-box;从content的位置开始显示内容