安装插件:npm install grunt-css-sprite --save-dev grunt-css-sprite主要功能:1.对 css 文件进行处理,收集切片序列,生成雪碧图2.在原css代码中为切片添加background-position属性3.生成用于高清设备的高清雪碧图,并在css文件末尾追加媒体查询代码4.生成高清设备雪碧图,使用 image-set5.支持选择器提取,进一步优化CSS文件大小6.在引用雪碧图的位置打上时间戳7.在样式末尾追加时间戳8.按照时间戳命名文件 配…

NPM地址:https://www.npmjs.com/package/gulp-css-spriter/ 配置gulpfile.js: var gulp = require('gulp'),     minifyCSS = require('gulp-minify-css'),     spriter = require('gulp-css-spriter'); gulp.task('css', function() {     var timestamp = +new Date();    …

最新地址:http://www.cnblogs.com/wang4517/p/4476758.html…

V3.0主要改进 1.增加了单独添加单张图片以及删除单张图片的功能 2.增加了生成.sprite文件用以保存雪碧图信息 3.增加了打开.sprite文件功能 什么是css sprite CSS sprite在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了. 为什么要用这个工具 1.加快网页加载速度 浏览器接受的同时请求数是10个,如果图片过多会影响整体的视…

前言 background-size:规定背景图片的尺寸.为CSS3属性.so...万恶的ie浏览器,此刻的内心一定是崩溃的!说实话,作为一个前端的coder,面对CSS3如此多的炫酷效果,我不能用起来,还要求我兼容ie8及以下,我一定放弃维护多年的淑女形象,拿起刀!!!干什么,你懂的!当然,我大天朝的XX网站以及领导的审美除外!毕竟,我还是一朵需要祖国的阳光沐浴而茁长成长的老花朵!言归正传,聊一聊今天的主题. background-size CSS3属性.用法主要有下面4种. length 设…

近段时间在弄GWT这一块,开发中遇到的一些不错的方法或者技巧,在此做个分享和记录,有不同见解可发表意见  互相切磋. 在web开发中,必然涉及到网页中的图片,本地浏览网页,要下载在服务器端的图片,然后才能正常浏览.那么浏览器从服务器上下载资源时,时间都耗在TCP/IP的连接,然后服务器还要准备资源.如果一个网页中有几十甚至上百张图片的话,其中消耗的时间可想而知.在普通的html网页中,我们可以把所有的一些常用图标放在一张图片中,然后通过"background-positon:x y"来…

直接说解决方法: 假设一张拼合好的大图大小是:900 x 1000 px (如上图) 现在想取图中左上角的河马图标,并缩小图标的大小. 正常取图: .sprite { background: url('imgs/woqu_localjoin_all.png') no-repeat -21px -80px; width: 190px; height: 154px; } 现在取正常图标大小的一半: <pre name="code" class="html">…

这篇文章介绍了模拟jQuery中的ready方法及实现按需加载css,js实例代码,有需要的朋友可以参考一下     一.ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候想想它们到底是怎么实现的,但是看了一下jQuery中的源码,涉及到的模块比较多,(水平有限)代码比较难看懂:自己结合了一些书籍内容,总结一下.先说一下ready函数的实现思路:变量ready通过表达式赋值,右侧为一个自执行匿名函数,在这个匿名函数中,首先为各个浏览器的事件绑定处理函数,并为isRea…

module.exports = { output: { filename: '[name].js', chunkFilename: '[name].chunk.js', path: path.resolve(__dirname, '../dist') } } 在看别人写的webpack,output配置项,肯跟会碰到chunkFilename这样的配置项,那这个是什么意思呢?filename和chunkFilename有什么区别呢?首先看个例子 index.html <!DOCTYPE htm…

1.行内样式. 可以直接把css代码写在现有的HTML标签元素的开始标签里面,并且css样式代码要写在style=" "双引号中才可以, 如: <p style="color:red">这里文字是红色.</p> 2.内部样式. 如果想让HTML标签和css样式区分开来,可以采取将css样式代码写在<style type="text/css"> </style>标签之间. 这里的<style&g…