Re: [請益] 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;
: }
你這個語法看起來不太正確
這個技巧關鍵的地方在滑鼠移過去的時候
背景圖片的位置會移動
所以應該用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
推
07/07 07:02, , 1F
07/07 07:02, 1F
推
07/07 11:24, , 2F
07/07 11:24, 2F
→
07/07 11:26, , 3F
07/07 11:26, 3F
→
07/07 11:27, , 4F
07/07 11:27, 4F
→
07/07 11:29, , 5F
07/07 11:29, 5F
推
07/07 11:46, , 6F
07/07 11:46, 6F
推
07/07 12:05, , 7F
07/07 12:05, 7F
→
07/07 12:05, , 8F
07/07 12:05, 8F
→
07/07 12:07, , 9F
07/07 12:07, 9F
→
07/07 12:09, , 10F
07/07 12:09, 10F
→
07/07 12:10, , 11F
07/07 12:10, 11F
推
07/07 12:12, , 12F
07/07 12:12, 12F
→
07/07 12:14, , 13F
07/07 12:14, 13F
→
07/07 12:15, , 14F
07/07 12:15, 14F
→
07/07 12:15, , 15F
07/07 12:15, 15F
討論串 (同標題文章)