CSS学习，Pixy图像翻转和CSS精灵
生活随笔
收集整理的這篇文章主要介紹了
CSS学习，Pixy图像翻转和CSS精灵
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>測試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改變鏈接的背景色，懸停的背景色，按下的背景色，這個是簡單的翻轉
背景式樣使用了圖片，并且通過CSS改變默認背景圖片，鼠標懸停背景圖片，鼠標按下背景圖片，這樣的切換效果叫圖像翻轉，每個狀態調用一個單獨的圖片
而把這3個圖片整合起來，變成一個圖片，并且CSS通過圖片定位來顯示背景，這個技術就叫Pixy圖像翻轉
好處就是為了減輕多個圖片請求對服務器的壓力，只需一張整圖就可以完成一個翻轉效果
?
更進一步，如果整站上所有的小圖標，按鈕，背景圖都整合到一個大圖，這個技術就稱為CSS精靈，這樣對服務器的壓力會大大減輕，并且加快了下載速度，因為每個單獨的下載之間都會有間隔時間，而整合成一個大圖就不存在很多個小圖下載的間隔時間了，這個各位應該在傳FTP文件的時候有感觸，一個幾十M的單一文件遠比幾M的但是幾百幾千個零碎文件用的時間來的短，另外一個好處就是便于維護圖片，所以這個方法非常值得推廣。?
另外，關于上面的按鈕，我現在的圖片上是沒有文字的，如果我在PS或者fireworks里面已經把文字做上去了，比如“確定”，那么我標簽元素內的文字盡量不要刪除，可以用text-indent把文字偏移到按鈕區域外，只要肉眼看不見即可。對于搜索引擎來說一樣可以讀到內容的，另外也便于自己以后的維護，如果只是有元素但是沒有文字內容，通過代碼和圖片名，你也猜不到這個按鈕的作用，特別是時間長了肯定會忘記的，留著的話便于日后維護這部分代碼。
總結
以上是生活随笔為你收集整理的CSS学习，Pixy图像翻转和CSS精灵的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： oracle getpy,应用实例 -
- 下一篇： html中加艺术字体,CSS实现漂亮的大