文档章节

CSS Sprite(CSS贴图)

BlurNull
 BlurNull
发布于 2016/02/24 21:39
字数 344
阅读 58
收藏 3

吐槽:oschina的markdown怎么这么丑?

我们经常看到这样的CSS描述:

.demo {
    background-image: url('img/demo.png');
}

.demo-a {
    background-position: 0 -10px;
}

.demo-b {
    background-position: -48px -10px;
}

其中的demo.png就是将多个小图像整合到一起的图片,目的是减少对资源请求次数。

那么怎么整和呢,除了图片处理的软件,这里推荐几个在线的工具:

  • SpritePad:在线制作贴图(自动对齐功能需要注册收费)

SpritePad

拖动需要整合的图片到指定窗口,嗯……直接看效果图吧(希望爱奇艺能原谅我从其APK里借用的图标— —||)

SpritePad界面示例

搞定之后,最好先FitDocument一下,剪裁无用区域,然后点击Download就会下载整合后的图片和CSS文件。

  • SpriteMe:浏览器书签式操作,打开指定的页面,运行收藏的SpriteMe书签,自动抓取页面图片资源并整合

SpriteMe

具体操作参考其网站说明,比较简单。

  • SpriteCow:有贴图但是不确定定位参数

SpriteCow

框选想要定位的图片,页面底部会自动计算位置和宽高,比较不好的就是它选择的图片内容的边缘,没有缓冲留白,感觉对图标类型的也不实用。

SpriteCow界面示例

对于需要经常变动的图片就不要费心整合到一张图里了

© 著作权归作者所有

BlurNull
粉丝 1
博文 13
码字总数 2045
作品 0
哈尔滨
私信 提问
compass精灵图

css雪碧图又叫css精灵或css sprite,是一种背景图片的拼合技术。使用css雪碧图,能够减少页面的请求数、降低图片占用的字节,以此来达到提升页面访问速度的目的。但是它也有令人诟病的地方,...

Billydotzhang
2016/11/17
12
0
切片合并雪碧图--grunt-css-sprite

grunt-css-sprite 这是什么 这是一个帮助前端开发工程师将 css 代码中的切片合并成雪碧图的工具; 其灵感来源于 grunt-sprite,由于其配置参数限制目录结构等,不能满足通用项目需求,重新造...

米空格
2015/01/29
1K
0
移动端使用 rem 单位时 css sprites 定位问题

现在开发移动端 wap 页面,相信大家都会使用强大的 rem 单位去适配各种机型和屏幕;为了减少网络请求数量,提高网页访问性能,一般都会把多个小 icon 合并成一张 sprite 图,然后根据 backgr...

幽涯
2018/06/17
0
0
QMUI Web 框架正式发布 2.0 版本

QMUI Web 是一个专注 Web UI 开发,帮助开发者快速实现特定的一整套设计的框架。框架主要由一个强大的 SASS 方法合集与内置的工作流构成,由QMUI 团队出品。 重要更新 本次框架更新版为 2.0 ...

kayo5994
2017/04/11
3.2K
2
CSS编译工具--Peaches

Peaches是一个基于Node的CSS编译工具,用于自动合成CSS Sprite。 Peaches 追求简单、自然的CSS书写方式! 大致的工作原理如下: 1. 我们在书写样式时,对每个需要使用背景图片的元素,进行单...

sliuqin
2013/04/12
536
0

没有更多内容

加载失败,请刷新页面

加载更多

最简单的获取相机拍照的图片

  import android.content.Intent;import android.graphics.Bitmap;import android.os.Bundle;import android.os.Environment;import android.provider.MediaStore;import andr......

MrLins
今天
6
0
说好不哭!数据可视化深度干货,前端开发下一个涨薪点在这里~

随着互联网在各行各业的影响不断深入,数据规模越来越大,各企业也越来越重视数据的价值。作为一家专业的数据智能公司,个推从消息推送服务起家,经过多年的持续耕耘,积累沉淀了海量数据,在...

个推
今天
9
0
第三方支付-返回与回调注意事项

不管是支付宝,微信,还是其它第三方支付,第四方支付,支付机构服务商只要涉及到钱的交易都要进行如下校验,全部成功了才视为成功订单 1.http请求是否成功 2.校验商户号 3.校验订单号及状态...

Shingfi
今天
5
0
简述Java内存分配和回收策略以及Minor GC 和 Major GC(Full GC)

内存分配: 1. 栈区:栈可分为Java虚拟机和本地方法栈 2. 堆区:堆被所有线程共享,在虚拟机启动时创建,是唯一的目的是存放对象实例,是gc的主要区域。通常可分为两个区块年轻代和年老代。更...

DustinChan
今天
7
0
Excel插入批注:可在批注插入文字、形状、图片

1.批注一直显示:审阅选项卡-------->勾选显示批注选项: 2.插入批注快捷键:Shift+F2 组合键 3.在批注中插入图片:鼠标右键点击批注框的小圆点【重点不可以在批注文本框内点击】----->调出批...

东方墨天
今天
7
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部