css sprites(很好很強大)(zz)

2021-08-30 12:45:37 字數 1464 閱讀 8594

最近,用到這個技術,讓我們更深入的了解它吧^^

來自:對啦,下面的圖,記得放進素材庫哦,將來備用,改個漸變就ok啦^^

我們知道,自css革命以降,html傾向於語義化,在一般情況下不再在標記裡寫裝飾性的內容而是把呈現的任務交給了css。gui是繽紛多彩的,少不了各種漂亮的圖來裝點。新時代的生產方式是,在html布滿各種各樣的鉤子(hook),然後交由css來處理。

在需要用到的時候,現階段是通過css屬性background-image組合background-repeat, background- position等來實現(題外話:為何我提現階段,因為未來瀏覽器若支援content則又新增另外的實現方法)。我們的主角是,你一定猜到了,就是 background-position。通過調整background-position的數值,背景就能以不同的面貌出現在你眼前。其實整體 面貌沒有變,由於位置的改變,你看到只該看到的而已。就好比手錶上的日期,你今天看到是21,明天看到是22,是因為它的position往上跳了一 格。所以你也大概了解到,css sprites一般只能使用到固定大小的盒子(box)裡,這樣才能夠遮擋住不應該看到的部分。

我們使用yui的sprite.png舉個例子,假如我們有這麼一段**,max代表最大化,min代表最小化,我們需要給它們配上相應的漂亮(這樣我們的**才能夠吸引人):

[www.52css.com]

最大化最小化

這兩個class都使用同乙個:

[www.52css.com]

.min, .max 

效果如下:

[www.52css.com]

最大化最小化

[ 可先修改部分** 再執行檢視效果 ]

我們看到一團灰,沒錯,因為我們還沒有指定background-position,預設為 0 0,可以看下sprite.png,處於這個位置正是 灰塊。好了,我們要找到代表最大化的加號和代表最小化的減號的位置找出來。經過測量,最大化按鈕位於y軸的350px處,最小化按鈕位於y軸400px 處。想一想我們如何才能讓它們能夠顯示出來呢,明顯,要向上提公升sprite.png,得到**如下:

[www.52css.com]

.max 

.min 

再次檢視效果:

[www.52css.com]

最大化最小化

[ 可先修改部分** 再執行檢視效果 ]

這一次我們成功了!

css sprites優點

我們從前面了解到,css sprites為什麼突然跑火,跟能夠提公升**效能有關。顯而易見,這是它的巨大優點之一。普通製作方式下的大量,現在合併成乙個,大大減少了http的連線數。http連線數對**的載入效能有重要影響。

css sprites缺點

效能壓倒一切。css sprites是值得推廣的一種技術。尤其適宜用於fir,比如固定大小的icon替換。為保持相容性,中的各個部分保持一定的距離是一種不錯的做法。

很好很強大

adobe太厲害了吧,他的軟體做的好細緻啊。老師給過乙個adobe cs3,包括了adobe的全套產品,但是由於對機器的要求高,俺裝不上,也跑不起來。相比來講超星就要粗糙的多了,看作品就知道誰是高手誰是低手了。又去看了adobe的 感覺兩個字 專業。這年頭你不專業能行嗎?所以我決定以後多多學習高人的...

Oracle很好 很強大

oracle很好 很強大 oracle預設有3個使用者分別為sys使用者預設密碼為change on install,system使用者預設密碼為manager,scott使用者預設密碼為tiger sys使用者為超級管理員 對應的角色為dba 資料庫管理員 system使用者為系統管理員 對應的角...

console功能很好很強大

先上圖看看 的前端是怎麼玩提示的 原來console.log竟然也能調整字型,果斷檢視原始碼看看我有什麼發現。js解下壓縮先。得到如下 珍藏吧 console log c 安全警告!font size 50px color red webkit text fill color red webkit ...