作者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