Web前端——图片压缩与合并
来源:互联网 发布:ubuntu中文五笔输入法 编辑:程序博客网 时间:2024/06/06 10:06
概述
Web前端需要做的漂亮,必定引入很多图片和图标来美化界面,但是嵌入式设备Flash有限,总共就那么几M空间,可用于Web资源存放区域很受限制,本文记录一种用于Web前端的图片压缩与合并方法,将多个制作好的图片和图标合并到一张图片中,既减小了占用Flash大小,又使得浏览器一次加载便可加载到所有图片
CSS Sprite Generator
要使用一个在线图片压缩合并工具,CSS Sprite Generator,链接地址:http://spritegen.website-performance.org/
进入后在网页左上方一片区域,有open、Setting、Clear、Downloads和About,点击open打开所需合并的图片,该工具会自动优化对齐
做一个例子,如下图加载进来一些图片后,会自动对齐
点击其中一个图标,在右侧的设置区域可看到其坐标
这坐标怎么用?回到左边的区域,点击Downloads,右边区域会更改为下载选择,点击spritesheet会下载合并后的图片,点击stylesheet会下载所有图标的样式,如下图是合并后的图片
stylesheet样式文件内容如下
.sprite { background-image: url(spritesheet.png); background-repeat: no-repeat; display: block;}.sprite-icon-delete-normal { width: 50px; height: 50px; background-position: -5px -5px;}.sprite-icon-modify-normal { width: 50px; height: 50px; background-position: -5px -65px;}
每个图标有width、height和background-position三个属性,这其实就是对应css样式,可按如下格式建立一个删除图标的样式
.icon-delete-normal { width:50px; height:50px; overflow: hidden; background-repeat: no-repeat; background-image: url('../img/spritesheet.png'); background-position: -5px -5px;}
其中url中为从这个工具下载的spritesheet合并图片,HTML中就可以使用<div class="icon-delete-normal" ......>......</div
>来完全显示该图标了
阅读全文
0 0
- Web前端——图片压缩与合并
- web前端-图片,优化,压缩
- 移动前端—图片压缩上传实践
- 移动前端—图片压缩上传实践
- 移动前端—图片压缩上传实践
- 移动前端—图片压缩上传实践
- web前端压缩图片方法——加快页面加载速度
- web前端压缩图片方法——加快页面加载速度
- 前端代码和资源的压缩与合并
- web前端之HTML5压缩图片compress image with canvas
- 前端图片压缩 pngquanty
- 前端压缩图片
- Html5前端图片压缩
- 移动前端图片压缩
- 【web】js图片压缩并上传——图片压缩-demo01
- Web前端—表现与数据分离
- web前端——实现上传图片预览功能
- 使用grunt压缩,合并前端代码
- 写给自己看的博客_DoTween
- mongo简单操作
- 面向对象及三大特征讲解(图文)
- Codeforces Round #425 (Div. 2) B
- C++ 参数:复制,引用?
- Web前端——图片压缩与合并
- HDU6043 & 2017 Multi-University Training Contest
- 最长公共上升子序列LCIS
- 学生信息管理系统问题集锦(三)
- 译Combining Markov Random Fields and Convolutional Neural Networks for Image Synthesis
- 安装完pyspark报错
- 03-非关系型数据库种类介绍
- 目标检测的图像特征提取之(一)HOG特征
- 字符编码笔记:ASCII,Unicode 和 UTF-8 的区别