[請益] CSS設計同一張圖片變化效果問題

[piligo (霹靂狗)]

他的效果是透過nav.gif這張圖做變化，nav.gif是一張10x82大小的漸層圖，
這張圖高度從0~41是一個漸層色，42~82又是另一個漸層色，當滑鼠沒touch
到，他是呈現0~41這個漸層，當滑鼠touch到他會顯示42~82這個範圍的漸層
。

第一個問題是這是什麼原理，底下的語法全部都改過了，雖然有變化，但
還是看不出關鍵點在哪裡

第二個問題是這個效果有個缺點，當touch到有套這個特效的點，nav.gif
都會從新下載一次，雖然圖檔不大，但當有套特效是一整排的連結，這樣
滑鼠移過去就好玩了，這有解決辦法嗎?

謝謝

效果語法
.navigation {
        background: #DED9D0 url(img/nav.gif) repeat-x; height: 41px;
        border-top: 1px solid #996;
}
.navigation a {
        background: #FFF url(img/nav.gif) repeat-x;
        border-right: 1px solid #C9C6B3;
        color: #553;
        float: left;
        font: bold 1em Tahoma,sans-serif;
        padding: 0 14px;
        line-height: 41px;
        text-align: center;
        text-decoration: none;
}

--
※ 發信站: 批踢踢實業坊(ptt.cc) 
◆ From: 210.69.40.253
推 GcB:沒 a:hover 的嗎= =?
推 edl2000:他要表達的是同一張圖片,透過滑鼠移上去會產生圖片位移
→ edl2000:http://www.hsiu28.net/style/article_detail.php?id=16
→ edl2000:上面網址就是教學與效果
推 piligo:謝謝提供教學 但您提供的也是有我提到第二點的問題
→ piligo:在位移時他圖片都會從新下載 真困擾
推 piligo:奇怪了 教學的樣本沒有這個狀況@@ 跟我把CSS外部連結有關嗎
推 Allenguy:我用這招 不會重新下載
推 eagen0828:CSS外連沒有這個問題..因為我用外連做過一樣的效果