精灵图加background-clip解决点击区域太小增加的点击难度问题

最新推荐文章于 2022-03-27 18:16:11 发布

颖_恋

最新推荐文章于 2022-03-27 18:16:11 发布

阅读量226

点赞数 1

本文链接：https://blog.csdn.net/line233/article/details/94580282

版权

在做页面时，一般页面上都会有一些小按钮，当按钮太小时就容易点击不到目标或者是点击错误，尤其在移动端设备上表现更明显，那么怎么解决呢？可以参考以下的方式

重点：使用背景图、借助雪碧图(精灵图)和background-clip(背景剪切)

具体使用：

先贴上测试的雪碧图

<style>
        * {
            box-sizing: border-box; /* 设置为border-box 宽度包括边框和padding*/
            padding: 0;
            margin: 0;
        }
        a{
            display: block;
            width: 40px;    /* 容器的宽度 */
            height: 44px;   /* 容器的高度 */
            padding: 12px 10px;  /* 设置内边距 */
            background: yellow url("images/sprites.png") -20px 0/200px 200px;

            /*background-color: yellow;*/
            /*让背景从内容(content)开始平铺*/


            /* 以下两句是剪切方式 */
            background-origin: content-box;
            /*没有做背景裁剪 背景图默认就是从边框显示*/
            /*默认的就是
            border-box  边框以外被裁剪掉
            padding-box 内边距以外被裁剪掉
            content-box 内容以外被裁剪掉
            */
            background-clip: content-box;
        }
    </style>
</head>
<body>
<a href="#"></a>
</body>
</html>

剪切之前剪切之后：

虽然剪切之后外观变小了，但是点击区域与剪切之前相同

颖_恋

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
精灵图加background-clip解决点击区域太小增加的点击难度问题

在做页面时，一般页面上都会有一些小按钮，当按钮太小时就容易点击不到目标或者是点击错误，尤其在移动端设备上表现更明显，那么怎么解决呢？可以参考以下的方式重点：使用背景图、借助雪碧图(精灵图)和background-clip(背景剪切)具体使用：先贴上测试的雪碧图<style> * { box-sizing: border...
复制链接

扫一扫