CSS使用rem单位时,雪碧图的调整方法

雪碧图是利用background-position来定位的,而这个位置是针对背景图片的大小来说的。所以不能设置background-size为100%,cover之类的,因为这样改变了背景图片的尺寸,就不能用位置定位了。

比如一张雪碧图的尺寸是500 * 300,其中一个图标的位置离左上角的距离约为20px, 20px

那么background-position: -20px -20px就可以显示这个图标。

background-position: -20px -20px;

那么在rem布局时要如何调整呢?

因为rem是相对的,因此我们使用rem单位时,背景图片的大小也必须随之变化,所以background-size要同时变为rem,具体怎么变呢?

首先,我们查看图片的原始尺寸,比如是 500 * 300;根据html的font-size进行转换,假设html的font-size是100,则background-size:5rem 3rem

background-size:5rem 3rem

这样就能在使用rem的时候也能愉快地应用雪碧图了。

发布了98 篇原创文章 · 获赞 41 · 访问量 20万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览