作者othree (OOO)
看板Web_Design
標題Re: [請益] CSS設計同一張圖片變化效果問題
時間Fri Jul 6 21:49:33 2007
※ 引述《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
1F：推 Allenguy:通常用背景設top與bottom 不太需要設高度 除非三個圖以上 07/07 07:02
2F：推 piligo:怪哉 自己好了不會重新抓圖 原因不明 我是採用這個範本 07/07 11:24
4F：→ piligo:這樣.navigation a .navigation a:hover 的對應 是官方設計 07/07 11:27
5F：→ piligo:有問題 還是它這樣做有它的道理@@ 謝謝 07/07 11:29
6F：推 piligo:另外 .navigation a = a:link 嗎? 07/07 11:46
7F：推 piligo:從新下載狀況又出現了 也抓到原因 但為何會這樣@@ 07/07 12:05
8F：→ piligo:在index.html裡的meta charset 範本本來是iso-8859-1很正常 07/07 12:05
9F：→ piligo:但我有用到中文所以改成big5 然後會重新抓圖的狀況就發生了 07/07 12:07
10F：→ eagen0828:.navigation a 指的是全部狀況下的超連結 07/07 12:09
11F：→ eagen0828:另外網址被截斷囉!? 請縮址後在貼唄 07/07 12:10
12F：推 piligo:沒被截斷剛剛好 ㄏㄏ 另外全部狀況下的意思是? 不太懂 謝謝 07/07 12:12
13F：→ piligo:ㄜ 拍謝 真的被截斷了 看語法看到眼花了 07/07 12:14
14F：→ piligo:templates.arcsin.se/natural-essence-website-template/ 07/07 12:15
15F：→ piligo:不太喜歡縮址 因為久了就會失連 07/07 12:15