Css雪碧圖
Css雪碧圖： CSS雪碧 即CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合并技術，該方法是將小圖標和背景圖像合并到一張圖片上，然后利用css的背景定位來顯示需要顯示的圖片部分。
原理：CSS雪碧的基本原理是把你的網站上用到的一些圖片整合到一張單獨的圖片中，從而減少你的網站的HTTP請求數量。該圖片使用CSS background和background-position屬性渲染，這也就意味著你的標簽變得更加復雜了，圖片是在CSS中定義，而非<img>標簽。
如何生成雪碧圖？
- 安裝gulp插件： npm install –g gulp
- 安裝制作雪碧圖需要的插件 npm install –g gulp.spritesmith
最好全局和本地各裝一遍；
新建一個Gulpfile.js文件，將下列代碼放進去：
var gulp=require('gulp'); //引入這兩個gulp gulp.spritesmith
spritesmith=require('gulp.spritesmith');
gulp.task('default',function(){ //新建名為sprite的任務
gulp.src('images/*.png') //需要合成的圖片路徑 *為通配符 表示這個文件夾下面所有后綴為.png的文件都會被應用
.pipe(spritesmith({
imgName:'sprite.png',//合成后需要保存圖片的路徑
cssName:'sprite.css', //合成后需要保存的css的路徑
padding:5, //表示兩個圖片間的空隙
algorithm:'binary-tree', // Algorithm 有四個可選值分別為top-down、left-right、diagonal、alt-diagonal、binary-tree
// cssTemplate:'dist/handlebarsStr.css' //生成的css模板文件，可以是函數也可以是字符串
}))
.pipe(gulp.dest('dist/')) //將生成的文件放到dist文件夾下
})
或者：
進入項目 npm init 輸入需要的信息，創建一個package.json文件：
{
"name": "package.json",
"version": "1.0.0",
"description": "",
"main": "Gulpfile.js",
"dependencies": {
"gulp": "^3.9.1",
"gulp.spritesmith": "^6.5.1"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
這里提幾點需要注意的：
需要一個Gulpfile.js（首字母小寫也可以） ，運行時執行 gulp default（defaullt是你新建的任務名，不是固定的，你寫成其他也行）
imgName:'sprite.png',//合成后需要保存圖片的路徑
cssName:'sprite.css',
這兩個文件需要你先創建，里面的文件都要預先創建；
我這里是放在dist下面就要在dis下面創建這兩個文件
合成的雪碧圖；
css樣式：
.icon-1 {
background-image: url(sprite.png);
background-position: 0px 0px;
width: 33px;
height: 33px;
}
.icon-2 {
background-image: url(sprite.png);
background-position: -38px 0px;
width: 33px;
height: 33px;
}
.icon-3 {
background-image: url(sprite.png);
background-position: 0px -38px;
width: 33px;
height: 33px;
}
.icon-4 {
background-image: url(sprite.png);
background-position: -38px -38px;
width: 33px;
height: 33px;
}
.icon-5 {
background-image: url(sprite.png);
background-position: -76px 0px;
width: 33px;
height: 33px;
}
.icon-6 {
background-image: url(sprite.png);
background-position: -76px -38px;
width: 33px;
height: 33px;
}
.icon-7 {
background-image: url(sprite.png);
background-position: 0px -76px;
width: 33px;
height: 33px;
}
algorithm：四個參數只是決定圖片的排列順序；
top-down：
具體的參數可以看這里：
好了，雪碧圖就合成啦；
下面會講講如何使用雪碧圖；
創建一個文件：index.html
引入生成的css
<link rel="stylesheet" type="text/css" href="./dist/sprite.css" />
寫基本架構：class="icon-1" 這里是css里生成的樣式名；按順序寫好就行；
<ul class="sprite">
<li>
<s class="icon-1"></s>
<a href="">衣服</a>
</li>
<li>
<s class="icon-2"></s>
<a href="">鞋子</a>
</li>
<li>
<s class="icon-3"></s>
<a href="">背包</a>
</li>
<li>
<s class="icon-4"></s>
<a href="">雙肩包</a>
</li>
<li>
<s class="icon-5"></s>
<a href="">褲子</a>
</li>
<li>
<s class="icon-6"></s>
<a href="">羽絨服</a>
</li>
<li>
<s class="icon-7"></s>
<a href="">外套</a>
</li>
</ul>
給他們新增加一些樣式：
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
}
.sprite {
margin: 10px auto;
width: 206px;
border: 1px solid #b51600;
}
.sprite li {
cursor: pointer;
height: 42px;
width: 206px;
background-color: #b51600;
border-bottom: 1px solid #911001;
border-top: 1px solid #c11e08;
}
.sprite li a {
color: #fff;
line-height: 42px;
font-size: 14px;
}
效果就是這樣：
引入了css文件，class也改動了，怎么沒有圖標呢？
生成的css文件里面就告訴你了，讓標簽dispay:block；
.sprite li s{
display: inline-block;
margin-left: 10px;
margin-right: 8px;
}
看看效果：
浙公網安備 33010602011771號