提升移动端小图标的用户点击体验区域小技巧
提升移动端小图标的用户点击体验区域
问题描述
移动端如果使用精灵图作为背景图标素材排版时,为了只显示对应的图标,会把显示图标的容器元素宽高设置成图标大小,方便显示对应的图标。但由于图标尺寸比较小,需要在对应位置增加点击事件时,经常会无法准确点击或误触碰相邻的元素,这样会造成用户体验效果极差(如下图的)。最近在学习css3时,发现设置背景裁剪属性(background-clip:content-box)可以解决该问题。
实现原理
通过设置显示元素的边框或内边距,同时设置背景裁剪属性,达到增加显示元素的总体面积的效果。最终实现,点击以下白色区域均可以触发点击事件。当然,随着字体图标的应用,可以使用字体图标方式解决。
-
设置背景图片裁切效果图如下:
-
background-clip:border-box
从border的位置开始显示内容 -
background-clip:padding-box;
从padding的位置开始显示内容 -
background-clip:content-box;
从content的位置开始显示内容