CSS Sprites图片不清晰的问题(2倍的 CSS Sprites 如何缩放)
实例图片
首先来看一下例子图片:
缩放尺寸
这里就是本文的关键所在了,图片是需要进行缩放才能放进去的,原来单一的图片的时候我们直接用 CSS 的 background-size:50% 即可,但现在却不管用了,因为现在的 50% 实际是下图的样子:
那该怎么办呢?很简单。
首先,如果你的图标尺寸不一请把每个图标的空间都按最大的那个摆好,然后把原始图标放在左上角:
并且必须确保每个图片的空间都是正方形(注意是空间,不是图片具体大小),然后记住每个空间的边长。
调用尺寸
缩放完毕就该调用了。列如调用上图的第一行第二列的 “分类黑色” 图标,它在上图的尺寸为 102px,但我想让他显示的物理分辨率为 44px,那好,首先弄一个标签,长宽为 44px,坐标(background-position)即为 44px(X 轴)和 0(Y 轴)。
您可能感兴趣的文章:
CSS Sprites图片不清晰的问题(2倍的 CSS Sprites 如何缩放)
css background设置背景图片技巧及Sprite的应用
提高Web页面的性能
详解CSS3 object-position/object-fit属性实例
jQuery图片自动放大插件 Greyscale Hover Effect w/ CSS & jQuery
在服务端合并和压缩JavaScript和CSS文件
玩转jQuery按钮 请告诉我你最喜欢哪些?
css sprites方法减少图片请求来提高加载速度
H5 C3如何优化前端界面
php如何实现网站的图片压缩