柳州网站设计,如何编写网站后台程序,最早做视频播放网站,怎样做支付网站[css] 你是怎么设计css sprites#xff08;精灵图#xff09;的#xff1f;有哪些技巧#xff1f;
首先肯定不会去用PS量#xff0c;那太费时间了~
没有webpack以前#xff0c;用Gulp的gulp.spritesmith插件#xff0c;这里附上配置源码/* gulpfile.js */
const gulp …[css] 你是怎么设计css sprites精灵图的有哪些技巧
首先肯定不会去用PS量那太费时间了~
没有webpack以前用Gulp的gulp.spritesmith插件这里附上配置源码/* gulpfile.js */
const gulp require(gulp);
const gulpLoadPlugins require(gulp-load-plugins);
const $ gulpLoadPlugins();/*** desc 雪碧图自动合成*/
gulp.task(sprite, function () {return gulp.src(src/assets/sprite/*.png)//需要合并的图片地址.pipe(spritesmith({imgName: assets/sprite.png,// cssName: css/_sprite.scss,cssName: scss/_sprite.scss,padding: 5,algorithm: binary-tree,cssTemplate: function (data) {var arr [];data.sprites.forEach(function (sprite) {arr.push(.icon- sprite.name { background-image: url( sprite.escaped_image ); background-position: sprite.px.offset_x sprite.px.offset_y ; width: sprite.px.width ; height: sprite.px.height ; display: inline-block; vertical-align: middle; }\n);});return arr.join();}})).pipe(gulp.dest(dist/)).pipe(gulp.dest(src/));
});把图放入对应的文件夹中然后根据文件名对应的类名引用就行了
webpack的话可以使用webpack-spritesmith安装了webpack-spritesmith之后var SpritesmithPlugin require(webpack-spritesmith);
//module.exports {//代码}
plugins: [new SpritesmithPlugin({// 目标小图标src: {cwd: path.resolve(__dirname, ./src/assets/imgs/icons),glob: *.png},// 输出雪碧图文件及样式文件target: {image: path.resolve(__dirname, ./dist/sprites/sprite.png),css: path.resolve(__dirname, ./dist/sprites/sprite.css)},// 样式文件中调用雪碧图地址写法apiOptions: {cssImageRef: ../sprites/sprite.png},spritesmithOptions: {algorithm: top-down}})
]在index.html中引入csslink relstylesheet typetext/css href./dist/sprites/sprite.css /最后通过class引入小图标即可个人简介
我是歌谣欢迎和大家一起交流前后端知识。放弃很容易 但坚持一定很酷。欢迎大家一起讨论
主目录
与歌谣一起通关前端面试题
