[css] 你是怎么設(shè)計(jì)css sprites（精靈圖）的？有哪些技巧？

首先肯定不會(huì)去用PS量，那太費(fèi)時(shí)間了~ 沒有webpack以前，用Gulp的gulp.spritesmith插件，這里附上配置源碼/* gulpfile.js */ const gulp = require('gulp'); const gulpLoadPlugins = require('gulp-load-plugins'); const $ = gulpLoadPlugins();/*** @desc 雪碧圖自動(dòng)合成*/ 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/')); });把圖放入對(duì)應(yīng)的文件夾中，然后根據(jù)文件名對(duì)應(yīng)的類名引用就行了 webpack的話可以使用webpack-spritesmith，安裝了webpack-spritesmith之后var SpritesmithPlugin = require('webpack-spritesmith'); //module.exports = {//代碼} plugins: [new SpritesmithPlugin({// 目標(biāo)小圖標(biāo)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')},// 樣式文件中調(diào)用雪碧圖地址寫法apiOptions: {cssImageRef: '../sprites/sprite.png'},spritesmithOptions: {algorithm: 'top-down'}}) ]在index.html中引入css<link rel="stylesheet" type="text/css" href="./dist/sprites/sprite.css" />最后通過class引入小圖標(biāo)即可

個(gè)人簡(jiǎn)介

我是歌謠，歡迎和大家一起交流前后端知識(shí)。放棄很容易，
但堅(jiān)持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關(guān)前端面試題

總結(jié)

以上是生活随笔為你收集整理的[css] 你是怎么设计css sprites（精灵图）的？有哪些技巧？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。