CSS学习，Pixy图像翻转和CSS精灵
?
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>測(cè)試Pixy</title> <style> a{display:block;width:100px;height:50px; text-indent:-200px;background:url(bj.png) -100px 0 no-repeat; } a:hover, a:focus{background-position: left top; } a:active{background-position: right top; } </style> </head><body> <a href="javascript:;">確定</a> </body> </html>?
沒有用到圖片，通過CSS改變鏈接的背景色，懸停的背景色，按下的背景色，這個(gè)是簡(jiǎn)單的翻轉(zhuǎn)
背景式樣使用了圖片，并且通過CSS改變默認(rèn)背景圖片，鼠標(biāo)懸停背景圖片，鼠標(biāo)按下背景圖片，這樣的切換效果叫圖像翻轉(zhuǎn)，每個(gè)狀態(tài)調(diào)用一個(gè)單獨(dú)的圖片
而把這3個(gè)圖片整合起來，變成一個(gè)圖片，并且CSS通過圖片定位來顯示背景，這個(gè)技術(shù)就叫Pixy圖像翻轉(zhuǎn)
好處就是為了減輕多個(gè)圖片請(qǐng)求對(duì)服務(wù)器的壓力，只需一張整圖就可以完成一個(gè)翻轉(zhuǎn)效果
?
更進(jìn)一步，如果整站上所有的小圖標(biāo)，按鈕，背景圖都整合到一個(gè)大圖，這個(gè)技術(shù)就稱為CSS精靈，這樣對(duì)服務(wù)器的壓力會(huì)大大減輕，并且加快了下載速度，因?yàn)槊總€(gè)單獨(dú)的下載之間都會(huì)有間隔時(shí)間，而整合成一個(gè)大圖就不存在很多個(gè)小圖下載的間隔時(shí)間了，這個(gè)各位應(yīng)該在傳FTP文件的時(shí)候有感觸，一個(gè)幾十M的單一文件遠(yuǎn)比幾M的但是幾百幾千個(gè)零碎文件用的時(shí)間來的短，另外一個(gè)好處就是便于維護(hù)圖片，所以這個(gè)方法非常值得推廣。?
另外，關(guān)于上面的按鈕，我現(xiàn)在的圖片上是沒有文字的，如果我在PS或者fireworks里面已經(jīng)把文字做上去了，比如“確定”，那么我標(biāo)簽元素內(nèi)的文字盡量不要?jiǎng)h除，可以用text-indent把文字偏移到按鈕區(qū)域外，只要肉眼看不見即可。對(duì)于搜索引擎來說一樣可以讀到內(nèi)容的，另外也便于自己以后的維護(hù)，如果只是有元素但是沒有文字內(nèi)容，通過代碼和圖片名，你也猜不到這個(gè)按鈕的作用，特別是時(shí)間長(zhǎng)了肯定會(huì)忘記的，留著的話便于日后維護(hù)這部分代碼。
總結(jié)
以上是生活随笔為你收集整理的CSS学习，Pixy图像翻转和CSS精灵的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： oracle getpy,应用实例 -
- 下一篇： Telerik 2021 R2 SP1