您現在的位置是:電腦技術吧?>? 組裝維修 ??>??csssprite,css sprite如何使用??>??正文詳情

csssprite,css sprite如何使用

位念文2019-11-25 15:51:19 人圍觀
簡介css reset也許這是最好的sprite工具,好吧,至少是我第一次使用的工具,安裝CSS sprite。安裝起來不容易。稍后我將討論它的代碼如下:NPM install CScss reset怎么用

可能是最好用的雪碧圖工具了,好吧,至少是我用過最好用的。

  首先安裝css-sprite,安裝這里很坑,等我最后再說。

  代碼如下:  npm install css-sprite  我是使用gulp來構建前端代碼,所以還需要安裝gulp和gulp-if,安裝好之后就可以開始配置啦。

  新建一個task:  CSS Code復制內容到剪貼板  var gulp = require('gulp');  var gulpif = require('gulp-if');  gulp.task('sprites',function(){  gulp.src('img/icon/*.png') //這是要合并的圖片的路徑  .pipe(sprite({  name: 'icon', //定義一個名稱  style: '_icon.scss', //這是生成的樣式文件  format: 'png', //png格式的圖片  orientation: 'left-right', //雪碧圖合并的方向,也可以設置成垂直或水平  cssPath: '#{$icon-sprite-path}', //雪碧圖的路徑變量  template: './sprite-tpl.mustache', //scss生成的模板  processor: 'scss' //生成的樣式文件的格式  }))  .pipe(gulpif('*.png', gulp.dest('img/'), gulp.dest('css/')));  });  scss的模板使用mustache:  CSS Code復制內容到剪貼板  {{#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}}  搞定!就是那么簡單。

  現在只需要把圖片丟到icon文件夾里面,運行下gulp sprites,就可以生成一張雪碧圖icon.png和相對應的scss樣式文件_icon.scss了,也可以再新建一個監聽的任務,監聽icon文件夾,這樣就可以實時生成了。

  我把_icon.scss貼出來:  CSS Code復制內容到剪貼板  $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?v=#{$version}');  @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);  }  使用的時候只需要加上類似class=icon icon-qq,就可以了。

  css-sprite的地址  現在作者已經沒有更新css-sprite了,現在叫sprity,配置差不多,sprity多了一些功能,有時間再介紹。

  現在說下開頭說的那個坑,就是安裝的問題,微軟的環境很難安裝成功,因為依賴lwip,需要node-gyp重新編譯,我自己的電腦安裝好了,但是有些同事的電腦怎么配置都安裝不成功。

mac下還沒有嘗試,估計應該沒什么問題,windows的環境比較操蛋。

  如果你們也遇到安裝的問題,能夠解決的話,麻煩告知下啦。

:)

版權聲明:本文由 位念文 整理編輯。

原標題:css sprite使用步驟,css

轉載注明出處:http://www.dn9ww09s.icu/assemble/14357.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 百度外賣投訴電話,投訴外賣哪個有效

    百度外賣投訴電話,投訴外賣哪個有效 相關圖片投訴外賣商家會有什么后果現在,外賣軟件正在蓬勃發展。相信很多小伙伴都喜歡用百度拿出來訂購。所以有時候當我們遇到食物不新鮮等問題時,百度怎么能拿出來抱怨呢?接下來,...

  • 排插按鈕,排插按鈕按不下去

    排插按鈕,排插按鈕按不下去 相關圖片插線板按鈕按下去有閃光Flash是制作二維動畫的常用軟件。小貝的教程詳細介紹了一種非常實用的按鈕插入方法~非常實用,希望能對你有所幫助!工具/原材料閃蒸CS3或以上方法/步驟1。...

  • 如何購買vip,購買vip會員

    如何購買vip,購買vip會員 相關圖片購買網卡Handbei是一款移動賺錢軟件,可以讓企業和用戶相互受益。當你購買VIP在手,你會有更多的次數在喜歡比普通用戶!合作伙伴可以嘗試開放會員業務。現在,讓我們教你vip...

  • 怎么開啟屏幕鍵盤,屏幕怎樣顯示鍵盤

    怎么開啟屏幕鍵盤,屏幕怎樣顯示鍵盤 相關圖片電腦屏幕鍵盤哪里打開win10計算機系統的用戶越來越多。超人今天給大家帶來的是一門關于如何啟用win10屏幕鍵盤經典模式的課程。觸摸屏用戶可以在設定裝置的輸入端打開經典模式的屏...

  • python背景顏色,python改背景色

    python背景顏色,python改背景色 相關圖片python怎么弄成黑色背景本文主要介紹了Python通過PIL填充PNG圖片背景色的方法。實例分析了Python使用PIL模塊操作PNG圖片的技巧,具有很強的實用價值。有需要的朋友可以參pythonturtle背景顏...

  • 怎樣將html格式轉成PDF啊,PDF轉化html

    怎樣將html格式轉成PDF啊,PDF轉化html 相關圖片pdf怎么轉換成連接在上一個教程中,超人解釋了如何將excel表格轉換成HTML格式,然后許多網友問超人如何將PDF轉換成HTML。當然,對于這個文本格式轉換操作,可以使用PDF轉網頁轉換為...

  • x的不同字體,x字體設計

    x的不同字體,x字體設計 相關圖片x個性字體現在字體設計可以在電腦上輕松完成,但第一臺Mac電腦推出時,中文字體設計并不容易,而且有很多限制。然而,著名字體設計師柯志堅卻獨創了“李松”風格,后來成為蘋果...

  • 高德地圖添加商戶收費,高德地圖商家星級怎么弄

    高德地圖添加商戶收費,高德地圖商家星級怎么弄 相關圖片高德地圖添加商戶現在,越來越多的人選擇使用地圖導航,所以一些商業朋友想在地圖上標記他們的商店。如何標記商家?接下來,超人軟件將推出iPhone高德地圖標注門店...

  • 葡萄酒酒瓶,紅酒瓶

    葡萄酒酒瓶,紅酒瓶 相關圖片紅酒開瓶器怎么用最終效果細膩美觀的酒瓶其實制作起來很簡單。它可以很容易地與煙花在幾個步驟首先,使用形狀工具畫出相應的形狀。通過這些形狀的組合,我們可以得到一個瓶身...

  • ios11所有版本發布時間表,ios11與現在的軟件兼容嗎

    ios11所有版本發布時間表,ios11與現在的軟件兼容嗎 相關圖片蘋果11是什么時候上市的在蘋果2017年WWDC大會上,IOS 11最受關注。蘋果粉絲最關心的是IOS 11何時推出,ios11支持哪些設備。然后,超人軟件編輯將介紹ios9能用到什么時候...

熱評文章

  • 在家減肥瘦身運動,瘦身增肌

    在家減肥瘦身運動,瘦身增肌 相關圖片在家練什么容易瘦身設計人員或游戲玩家所要求的一些計算機配置是高標準的,但大多數情況下,計算機的系統盤會占用很大的空間,計算機運行會比較慢。此時,我們將選擇瘦身電腦...

  • PDF密碼,如何用密碼打開PDF

    PDF密碼,如何用密碼打開PDF 相關圖片有密碼的pdf怎么轉換對pdf文件進行設置密碼,雖說可以很好的保護文件內容,但是對于不重要的文件也需要進行輸入密碼才可以查看,是不是有點煩呢?想要解決這種麻煩,唯一方法就是...

  • 分層渲染,arnold分層渲染

    分層渲染,arnold分層渲染 相關圖片分層渲染圖一般來說,當玩二維游戲或渲染HTML5畫布時,需要執行優化以使用多層構建復合場景。在諸如OpenGL或webgl的低級渲染中,渲染是通過逐幀清理和繪制場景來執行vray分層渲染...

  • windows7隱藏盤,windows7怎樣隱藏硬盤盤符

    windows7隱藏盤,windows7怎樣隱藏硬盤盤符 相關圖片電腦系統怎么隱藏d盤微軟在保護用戶信息安全方面非常積極。例如,在win7系統中,為了防止其他人在自己的計算機上查看信息,微軟設計了win7操作來隱藏驅動器號,但是當他們想使用...

  • utf 8編碼,utf16編碼

    utf 8編碼,utf16編碼 相關圖片utf許多使用Dreamweaver的人在將頁面設置為UTF-8編碼時會發現光標位置有一個字符偏移量。如何解決這個問題?讓我們詳細介紹光標位置問題的幾種解決方案1。最utf-8...

  • 補考重修,為什么重修沒有補考

    補考重修,為什么重修沒有補考 相關圖片重修和補考哪個嚴重智能文理是一款非常實用的閱讀和學習軟件。在這個軟件中,用戶可以及時了解學習情況,包括補考和復試。那么,報名參加新的或補考需要采取哪些步驟呢?接下...

  • 繪制表格斜線,word怎么畫斜線

    繪制表格斜線,word怎么畫斜線 相關圖片怎么在excel中畫斜線首先看效果圖:首先是材質圖,用鋼筆勾選,然后將其轉換為選擇框,并使用字符作為材質。如果勾選不好,可以將背景的主要部分羽化到邊緣旁邊。在畫布上輸入字...

  • 安卓手機正負符號怎么打出來,蘋果手機正負符號上下

    安卓手機正負符號怎么打出來,蘋果手機正負符號上下 相關圖片正負符號怎么打字符號是常用的數學符號之一。如果要單獨輸入符號,可以用 和-符號表示。但如果你想輸入一個組合的標志,很多人不知道如何操作。與超人軟件站編輯了解如何玩下一...

  • u17,u17什么意思

    u17,u17什么意思 相關圖片網王u17之懶人Python適合Windows平臺使用win32gui、win32API和win32con包simu read.py。代碼如下:#-*-Coding=UTF-8網球王子u17漫畫...

  • 發現精彩打不開怎么辦,發現精彩打不開

    發現精彩打不開怎么辦,發現精彩打不開 相關圖片發現精彩無法啟動輸入法探索精彩應用是廣發銀行推出的移動金融軟件。用戶可以通過尋找精彩的應用程序來管理自己的廣發銀行信用卡,并進行各種方便快捷的操作。但最近,一位朋...

關注微信

变脸官网查询