本篇內(nèi)容介紹了“css-sprite的使用方法”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：申請(qǐng)域名、網(wǎng)絡(luò)空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、播州網(wǎng)站維護(hù)、網(wǎng)站推廣。
可能是最好用的雪碧圖工具了，好吧，至少是我用過(guò)最好用的。
首先安裝css-sprite，安裝這里很坑，等我最后再說(shuō)。
代碼如下:
npm install css-sprite
我是使用gulp來(lái)構(gòu)建前端代碼，所以還需要安裝gulp和gulp-if,安裝好之后就可以開(kāi)始配置啦。
新建一個(gè)task:
CSS Code復(fù)制內(nèi)容到剪貼板
var gulp = require('gulp');
var gulpif = require('gulp-if');
gulp.task('sprites',function(){
gulp.src('img/icon/*.png') //這是要合并的圖片的路徑
.pipe(sprite({
name: 'icon', //定義一個(gè)名稱
style: '_icon.scss', //這是生成的樣式文件
format: 'png', //png格式的圖片
orientation: 'left-right', //雪碧圖合并的方向，也可以設(shè)置成垂直或水平
cssPath: '#{$icon-sprite-path}', //雪碧圖的路徑變量
template: './sprite-tpl.mustache', //scss生成的模板
processor: 'scss' //生成的樣式文件的格式
}))
.pipe(gulpif('*.png', gulp.dest('img/'), gulp.dest('css/')));
});
scss的模板使用mustache：
CSS Code復(fù)制內(nèi)容到剪貼板
{{#items}}
${{name}}: {{px.offset_x}} {{px.offset_y}} {{px.width}} {{px.height}};
{{/items}}
@mixin sprite-width($sprite) {
width: nth($sprite, 3);
}
@mixin sprite-height($sprite) {
height: nth($sprite, 4);
}
@mixin sprite-position($sprite) {
$sprite-offset-x: nth($sprite, 1);
$sprite-offset-y: nth($sprite, 2);
background-position: $sprite-offset-x $sprite-offset-y;
}
@mixin sprite($sprite) {
@include sprite-position($sprite);
@include sprite-width($sprite);
@include sprite-height($sprite);
}
{{#sprite}}
{{class}} {
background-repeat: no-repeat;
overflow: hidden;
border: none;
background: url('{{{escaped_image}}}?v=#{$version}');
@include inline-block();
vertical-align: middle;
font-style: normal;
color:$icon-font-color;
}
{{/sprite}}
{{#items}}
.{{name}}{
@include sprite(${{name}});
}
{{/items}}
搞定！就是那么簡(jiǎn)單。
現(xiàn)在只需要把圖片丟到icon文件夾里面，運(yùn)行下gulp sprites，就可以生成一張雪碧圖icon.png和相對(duì)應(yīng)的scss樣式文件_icon.scss了，也可以再新建一個(gè)監(jiān)聽(tīng)的任務(wù)，監(jiān)聽(tīng)icon文件夾，這樣就可以實(shí)時(shí)生成了。
我把_icon.scss貼出來(lái)：
CSS Code復(fù)制內(nèi)容到剪貼板
$icon-qq: -262px -161px 60px 60px;
$icon-email: -332px -161px 60px 60px;
$icon-skype: -5px -252px 60px 60px;
$icon-phone: -75px -252px 60px 60px;
@mixin sprite-width($sprite) {
width: nth($sprite, 3);
}
@mixin sprite-height($sprite) {
height: nth($sprite, 4);
}
@mixin sprite-position($sprite) {
$sprite-offset-x: nth($sprite, 1);
$sprite-offset-y: nth($sprite, 2);
background-position: $sprite-offset-x $sprite-offset-y;
}
@mixin sprite($sprite) {
@include sprite-position($sprite);
@include sprite-width($sprite);
@include sprite-height($sprite);
}
.icon {
background-repeat: no-repeat;
overflow: hidden;
border: none;
background: url('#{$icon-sprite-path}/icon.png;);
@include inline-block();
vertical-align: middle;
font-style: normal;
color:$icon-font-color;
}
.icon-qq{
@include sprite($icon-qq);
}
.icon-email{
@include sprite($icon-email);
}
.icon-skype{
@include sprite($icon-skype);
}
.icon-phone{
@include sprite($icon-phone);
}
使用的時(shí)候只需要加上類似class="icon icon-qq"，就可以了。
“css-sprite的使用方法”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
重慶分公司
重慶分公司
