前言
一般我们在写网页的时候,总会遇到要用小图标来美化按钮的情况。
这时有些小伙伴可能想到的方法就是
用一个< a >标签包裹一个< i >或者其他标签元素
然后在子元素里面用图片来设置背景
但这时候就有个问题了!
你要扩大< a >标签的响应范围同时,要保持图标在正中央显示
如果精灵图里面每个图标的间隔都很大的话就很容易了
< a >标签多大,子元素也多大,然后用margin或者padding来定位就好了
但如果是遇到这种精灵图呢↓
我用的是王者荣耀官网的精灵图
假如我要用右上角的那个 加号图标
定位的方法
需要用两层标签
HTML:
<a href="#" class="b">
<i></i>
</a>
CSS:
.b {
display: block;
position