成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

雪碧圖sprity 合并多圖使用心得

vboy1010 / 2014人閱讀

摘要：介紹是一個(gè)模塊化的雪碧圖生成工具會(huì)根據(jù)目錄中的圖片生成相應(yīng)的雪碧圖和樣式文件，支持圖，可以內(nèi)嵌編碼格式的圖，支持不同的圖片格式和有不同的圖片引擎可以選擇。

介紹

sprity 是一個(gè)模塊化的雪碧圖生成工具
會(huì)根據(jù)目錄中的圖片生成相應(yīng)的雪碧圖和樣式文件，支持retina圖，可以內(nèi)嵌base64 編碼格式的圖，支持不同的圖片格式和有不同的圖片引擎可以選擇。
sprity 的前身是css-sprite,sprity的 git地址

sprity的功能

生成雪碧圖和對(duì)應(yīng)的css文件(也可以是less，sass等）

可以配置多個(gè)雪碧圖圖片

可以配置多個(gè)分辨率的雪碧圖（也就是可以按照比例生成雪碧圖)

可以講圖片搞成base64編碼

如何使用 安裝 
npm install sprity --save
使用

sprity可以和gulp，grunt配合使用，這里使用的是gulp，先上代碼

gulp.task("sprites", function () {
    return sprity.src({
        name: "icon",//這里配置name，生成的圖片就是icon-xx.png了
        src: config.src.img + "/icons/**/*.png",//這里配置生成多個(gè)雪碧圖，對(duì)應(yīng)目錄都在icons/**下面
        split: true,//一定要設(shè)置為true，不然多圖就有問題了
        style: "./icon.scss",//生成的sass文件路徑
        format: "png",//
        processor: "sass",//指定sass的處理器，[點(diǎn)擊查看更多](https://github.com/sprity/sprity#style-processors)
        cssPath: "#{$icon-sprite-path}",//這里制定生成的css 的路徑，模版里面也有對(duì)應(yīng)的
        dimension: [{
            ratio: 1, dpi: 36
        },
        {
            ratio: 0.5
        }],
        template: "./sprite-tpl.hbs",
        orientation: "binary-tree"http://指定圖片算法，具體的可以參考git

    })
    .pipe(gulpif("*.png", gulp.dest(config.dest.img), gulp.dest(config.src.sass)))
});

hbs模版,sprity采用的是handlebars模版，具體的語法參考handlebars，
自定義模版所有的字段參考wiki
注意$icon-sprite-path，在sprity的配置文件中用到過，這里在sass里面定義了一個(gè)變量
我的原圖都是2倍，合圖后需要縮放2倍，因此在配置文件中定義了一個(gè)0.5的倍率作為參考倍率

$icon-sprite-path: "/static/images";
{{#each layouts}}
    {{#each sprites}}
        .{{cssesc ../classname}} {
            {{#if dpi}}
                background-image: url("{{escimage url}}");
                background-size: {{baseWidth}}px {{baseHeight}}px;
                display:inline-block;
            {{/if}}
        }

    {{/each}}

    {{#each layout.items}}
        .{{../classname}}-{{meta.name}} {
        background-position: -{{baseDim x}}px -{{baseDim y}}px;
        width: {{baseDim width}}px;
        height: {{baseDim height}}px;
        }
    {{/each}}
{{/each}}

sprity生成的sass文件,東西太多了，選了幾個(gè)列出來，這下知道$icon-sprite-path是干什么的了吧

$icon-sprite-path: "/static/images";
.icon-apps {
}

.icon-apps {
   background-image: url("#{$icon-sprite-path}/icon-apps.png");
   background-size: 108px 108px;
   display:inline-block;
}
.icon-apps-huiyishi {
    background-position: -0px -0px;
    width: 54px;
    height: 54px;
}

注意，前綴如果想不是icon，可以通過prefix來控制

結(jié)語

sprity 能做到自動(dòng)化生成雪碧圖，但是可配置型不是特別高，控制粒度很大，后續(xù)考慮使用postcss，postcss的合圖插件力度可以控制在單個(gè)css規(guī)則上面，這樣就可以指定那些需要base64，那些需要合圖，那些可以搞到cdn上了

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111265.html

相關(guān)文章

  • postcss-lazysprite: 一種生成CSS 雪碧圖的懶惰姿勢(shì)

    摘要：無論是早期工具，還是現(xiàn)在流行的配合這類構(gòu)建工具而產(chǎn)生的雪碧圖插件。 本文原文鏈接：https://devework.com/postcss-...，轉(zhuǎn)載請(qǐng)注明原始來源，謝謝！ showImg(https://segmentfault.com/img/bVPmaC?w=1692&h=754); postcss-lazysprite 是一個(gè)基于PostCSS 開發(fā)的用于生成雪碧圖圖片及其C...

    BearyChat 評(píng)論0 收藏0

  • HTML-CSS

    摘要：但是，從字體上來說雪碧圖制作，使用以及相關(guān)，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標(biāo)準(zhǔn)布局的情況下，回滾到舊版本的，保證移動(dòng)設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭(zhēng)，但是有一件事是確定的極大的提升了移動(dòng)端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問題：怎樣通過 CSS 簡單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候，看到 ...

    xiaokai 評(píng)論0 收藏0

  • HTML-CSS

    摘要：但是，從字體上來說雪碧圖制作，使用以及相關(guān)，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標(biāo)準(zhǔn)布局的情況下，回滾到舊版本的，保證移動(dòng)設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭(zhēng)，但是有一件事是確定的極大的提升了移動(dòng)端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問題：怎樣通過 CSS 簡單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候，看到 ...

    CHENGKANG 評(píng)論0 收藏0

  • 使用compass自動(dòng)合并css雪碧圖(css sprite)

    摘要：使用雪碧圖，能夠減少頁面的請(qǐng)求數(shù)降低圖片占用的字節(jié)，以此來達(dá)到提升頁面訪問速度的目的。也正是因?yàn)檫@一點(diǎn)，導(dǎo)致很多開發(fā)者懶于使用雪碧圖。本文就介紹下怎樣使用來自動(dòng)合并雪碧圖。生成的每個(gè)雪碧圖默認(rèn)的規(guī)則是目錄名圖片名。 css雪碧圖又叫css精靈或css sprite，是一種背景圖片的拼合技術(shù)。使用css雪碧圖，能夠減少頁面的請(qǐng)求數(shù)、降低圖片占用的字節(jié)，以此來達(dá)到提升頁面訪問速度的目的。但...

    劉永祥 評(píng)論0 收藏0

  • CSS > 關(guān)于雪碧圖預(yù)處理和后處理方案的討論

    摘要：預(yù)處理方案代表和預(yù)處理方案是預(yù)先指定需要生成的雪碧圖切片元素，由工具合成后，得到相應(yīng)的雪碧圖和數(shù)據(jù)文件，開發(fā)中將二者投入使用。預(yù)處理方案一般以頁面為單元組織雪碧圖。結(jié)語關(guān)于雪碧圖的處理方案的討論就到此結(jié)束了。 廣告：SF 里弄了個(gè) CSS 小圈子，歡迎一起來討論問題 前端小圖標(biāo)處理方案眾多，本文主要介紹基于雪碧圖的處理方案，分析雪碧圖的預(yù)處理和后處理模式的得與失，以及在項(xiàng)目中通常會(huì)遇到...

    hyuan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<