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

[othree (OOO)]

※ 引述《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;
: }

你這個語法看起來不太正確
這個技巧關鍵的地方在滑鼠移過去的時候
背景圖片的位置會移動
所以應該用top而不是height(而且背景應該沒有height可以設定)

還有應該是
.navigation a
和
.navigation a:hover
成對的選擇器才對

不過你沒提供HTML部份的code或網頁
我只能這樣說的有點模糊
沒法直接幫你修

--
FrontPage is not a visual web editor. It is an IE page editor.

               From "designing with web standards" by jeffery zeldman

--
※ 發信站: 批踢踢實業坊(ptt.cc) 
◆ From: 140.118.5.39
推 Allenguy:通常用背景設top與bottom 不太需要設高度 除非三個圖以上
推 piligo:怪哉 自己好了不會重新抓圖 原因不明 我是採用這個範本
→ piligo:http://templates.arcsin.se/natural-essence-website-temp
→ piligo:這樣.navigation a .navigation a:hover 的對應 是官方設計
→ piligo:有問題 還是它這樣做有它的道理@@  謝謝
推 piligo:另外 .navigation a = a:link 嗎?
推 piligo:從新下載狀況又出現了 也抓到原因 但為何會這樣@@
→ piligo:在index.html裡的meta charset 範本本來是iso-8859-1很正常
→ piligo:但我有用到中文所以改成big5 然後會重新抓圖的狀況就發生了
→ eagen0828:.navigation a 指的是全部狀況下的超連結
→ eagen0828:另外網址被截斷囉!? 請縮址後在貼唄
推 piligo:沒被截斷剛剛好 ㄏㄏ 另外全部狀況下的意思是? 不太懂 謝謝
→ piligo:ㄜ 拍謝 真的被截斷了 看語法看到眼花了
→ piligo:templates.arcsin.se/natural-essence-website-template/
→ piligo:不太喜歡縮址 因為久了就會失連