transform:scale( x )： 语法为：transform: scale(x，y). 同时有scaleX, scaleY专门的x, y方向的控制。 例如：transform: scale(0.5) 缩小为原来的一半 和zoom不同，scale并不支持百分比值和normal关键字，只能是数 ...
分类：
Web程序 时间：
2018-05-31 19:31:31
阅读次数：
705
【08】css sprite是什么？有什么优缺点？概念：将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。优点：减少HTTP请求数，极大地提高页面加载速度。增加图片信息重复度，提高压缩比，减少图片大小。更换风格方便，只需在一张或几张图片上修改颜... ...
分类：
Web程序 时间：
2018-05-13 23:04:06
阅读次数：
188
有一个在线工具：https://www.toptal.com/developers/css/sprite generator。生成雪碧图是极其方便的。 现在呢，我们来试试用gulp来生成雪碧图。 第一步：去淘宝镜像地址（http://npm.taobao.org/）里安装cnpm。 $ npm in ...
分类：
其他好文 时间：
2018-05-02 21:05:14
阅读次数：
626
什么是CSS Sprite精灵？ 是用于前端的一种图片应用技术，通常情况，我们的开发的网页或许有很多张图片，假如在一个页面上有50多张小图片，这意味着浏览器要逐个下载50张图片。Css Sprite它允许你将一个页面涉及到的所有零星图片都包含到一张图中，这样一来，当访问页面时，就只需要下载1张图片了 ...
分类：
Web程序 时间：
2018-02-28 18:56:03
阅读次数：
215
一原理： 其实原理很简单，就是使用background-position在一张大图中定位裁剪出我们需要的一个部分，然后用这个部分当作单个的图片使用。 background-position(x,y). 简单描述：以图片的左上角为原点坐标，两个参数分别为x,y轴。 ...
分类：
Web程序 时间：
2018-01-09 10:20:28
阅读次数：
249
客户端 一、减少HTTP请求数 1、合并JavaScript、CSS等文件 2、使用CSS Sprite：将背景图片合并成一个文件，通过background-image和background-position控制显示 3、字体图标 4、将请求划分到不同的域名上 二、减少DNS查询 用户输入URL后， ...
分类：
其他好文 时间：
2017-12-01 13:31:20
阅读次数：
171
图片拖入后 一般取同行同列最高最宽 自动在所选目录生成 打开: 修改 四次请求有点多啊. 打开 css sprite 自动生成坐标地址. 不过我们要把它排远一点 OK了。 我们生成以后: 坐标地址就可以直接用了，不用一个像素的移了 因为生成时，也会产生文件，所以我们还是选择源文件夹吧. 雪碧图生成. ...
分类：
其他好文 时间：
2017-10-27 16:03:55
阅读次数：
546
在网页中插入icon图标的方法总结 CSS Sprite font + HTML font + CSS 其中不太明白的是\f309这一段css表示：在节点#twitter前面，插入一段内容（"\f309"）。这个内容（"\f309"）是一个字符，f309是这个字符的16进制unicode编码。不理解 ...
分类：
其他好文 时间：
2017-09-23 18:52:31
阅读次数：
179
今天重点学习了CSS精灵图。 “CSS精灵”，英语css sprite，所以也叫做“CSS雪碧”技术。是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。 css精灵有什么优点，就是减少了http请求。比如4张小图片，原本需要4个h ...
分类：
Web程序 时间：
2017-08-23 00:31:12
阅读次数：
279
前言：页面总是时不时会出现小图标，就来总结一些自己知道的实现方法，应用情况依靠场景大家自行参考吧。 （一）雪碧图 CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。 特点： ...
分类：
其他好文 时间：
2017-07-16 00:04:33
阅读次数：
672
