国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

雪碧圖的生成

zhonghanwen / 1528人閱讀

摘要：寫在開頭的話最近參加了的一個(gè)任務(wù)自定義，樣式，花了半天時(shí)間，摸索出了一條制作雪碧圖的路徑，跟大家分享，如果有更好的制作雪碧圖的方法，希望告知一下，在此感謝。

寫在開頭的話

最近參加了2017ife的一個(gè)任務(wù)----自定義checkbox， radio樣式，花了半天時(shí)間，摸索出了一條制作雪碧圖的路徑，跟大家分享，如果有更好的制作雪碧圖的方法，希望告知一下，在此感謝。

首先

在網(wǎng)上的圖標(biāo)庫中尋找你生成雪碧圖所需要的圖標(biāo)，我在阿里巴巴矢量圖標(biāo)庫中下載了一個(gè)復(fù)選框，下載下來之后，我們可以看到圖標(biāo)中間是白色的，接下來我們需要用一些畫圖軟件把中間的白色改成透明色，也就是傳說中的摳圖，我自己選用的是photoshop。

使用photoshop進(jìn)行摳圖

1.打開圖片后，選擇菜單欄中的“選擇”---->"色彩范圍"

接著點(diǎn)擊圖標(biāo)的白色區(qū)域，然后點(diǎn)“確定”退出，最后按下鍵盤的delete鍵，中間的白色就變成透明色了。

2.接下來還要用photoshop設(shè)置圖標(biāo)的大小，點(diǎn)擊菜單欄“圖像”的“圖像大小”，設(shè)置我們所需要的圖標(biāo)大小。

使用css-sprite將多個(gè)圖標(biāo)合成一張雪碧圖


下面的數(shù)據(jù)就是我們設(shè)置CSS中background-position所需要的位置

雪碧圖的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：1、減少http訪問次數(shù)，因?yàn)槊看尾榭匆粡垐D片就會(huì)向服務(wù)器發(fā)起一次http請(qǐng)求，而雪碧圖把一些圖片整合為一張圖片。

缺點(diǎn)：1、內(nèi)存缺陷；2、頁面縮放有暴露風(fēng)險(xiǎn)3、對(duì)爬蟲不友好

最后

到這里制作雪碧圖就結(jié)束了，雖然看起來很簡單，但我自己也是摸索了一些時(shí)間，希望對(duì)你們有所幫助。

這是我的這次任務(wù)的demo-----自定義checkbox， radio樣式demo

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

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

相關(guān)文章

  • 雪碧圖的生成

    摘要：寫在開頭的話最近參加了的一個(gè)任務(wù)自定義，樣式，花了半天時(shí)間，摸索出了一條制作雪碧圖的路徑，跟大家分享，如果有更好的制作雪碧圖的方法，希望告知一下，在此感謝。 寫在開頭的話 最近參加了2017ife的一個(gè)任務(wù)----自定義checkbox， radio樣式，花了半天時(shí)間，摸索出了一條制作雪碧圖的路徑，跟大家分享，如果有更好的制作雪碧圖的方法，希望告知一下，在此感謝。 首先 在網(wǎng)上的圖標(biāo)庫...

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

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

    摘要：無論是早期工具，還是現(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

  • 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

  • CSS Sprite雪碧圖的應(yīng)用

    摘要：雪碧圖的使用場景靜態(tài)圖片，不隨用戶信息的變化而變化。使用使用雪碧圖之前，我們需要知道雪碧圖中各個(gè)圖標(biāo)的位置。以上面的雪碧圖為例實(shí)際雪碧圖中各個(gè)小圖片的起始位置和上面的展示圖不同用一個(gè)來闡述它的使用方法。 CSS雪碧圖，即CSS Sprite，也有人叫它CSS精靈圖，是一種圖像拼合技術(shù)。該方法是將多個(gè)小圖標(biāo)和背景圖像合并到一張圖片上，然后利用CSS的背景定位來顯示需要顯示的圖片部分。 s...

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

  • CSS Sprite雪碧圖的應(yīng)用

    摘要：雪碧圖的使用場景靜態(tài)圖片，不隨用戶信息的變化而變化。使用使用雪碧圖之前，我們需要知道雪碧圖中各個(gè)圖標(biāo)的位置。以上面的雪碧圖為例實(shí)際雪碧圖中各個(gè)小圖片的起始位置和上面的展示圖不同用一個(gè)來闡述它的使用方法。 CSS雪碧圖，即CSS Sprite，也有人叫它CSS精靈圖，是一種圖像拼合技術(shù)。該方法是將多個(gè)小圖標(biāo)和背景圖像合并到一張圖片上，然后利用CSS的背景定位來顯示需要顯示的圖片部分。 s...

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

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

0條評(píng)論

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