- 2008-12-23 (Tue) 8:21
- • 电脑应用 •
这方法我是在wp.Vicuna作者wu那里学来的，是利用CSS的padding属性，图片周围腾出很小一点空隙来显示背景图片，来达到图片周围流水效果。
其实他这种效果是两张图片叠加的效果，前面我们看到的主图片是在(X)HTML里调过来的，而图片周围流水效果是其background-image(是动画GIF)，而背景图片显示的范围只有我们留出的padding空隙那么大，他只能显示那部分。效果看起来像流动的线条。
这里还是借用一下俄罗斯美女Janaina，请先看效果。图片1.始终让其显示流水效果，图片2.只有在OnMouse的时候显示，也就是hover。
（点击可以看大图，是Highslide图片特效）
想要达到这种效果必须要用这图片bg_current.gif —-> ：
(X)HTML下调用 <img src="xxx.jpg" alt="" /> CSS下调用 img { background-image: url(bg_current.gif); padding: 1px; } OnMouse .pict a img { padding: 1px; } .pict a:hover img { background-image: url(bg_current.gif); padding: 1px; }
这里最重要的就是padding:1px; 我们留出这空隙就是为了在此范围内显示背景图片，其他是不可见的。当然你也可以加 border:2px solid #ccc; 等，上图我是加了的。
值得注意的是：这效果在WIN IE6下是显示不出效果的，因为IE6不支持padding属性。
但是我们可以利用图片亲元素<p>或<div>来细化CSS的方法来达到图片1.的显示效果。
像下面这样写代码，它就会兼容IE6。
.pict {
background-image: url(bg_current.gif);
padding: 1px;
display: inline;
_width: 100px; /*For WIN IE6*/
}
.pict{
display:table;
}
.pict img {
vertical-align: bottom;
}
遗憾的是图片2.的显示效果（也就是OnMouse时）在IE6下是无论如何达不到的。
在IE7，Opera，Safari，Firefox，Chrome下好用，因为都支持padding属性。
愿WIN IE7早点普及，之前只能辛勤细化CSS啦。
至于Highslide图片特效和图片流水效果结合（即同时调用）很简单，调用Highslide的JS库（class=”highslide”），又调用上面给出的CSS（class=”pict”）而CSS在后台调用背景图片（动画GIF），当然(X)HTML是少不了的，他调用前面的主图片，包括highslide点击以后的大图片。（应要求具体写之）
<div class="pict"><a class="highslide" onclick="return hs.expand(this)" href="photo.jpg"> <img src="photothumb.jpg" alt="" /></a></div>
Comments : 42Add Your Own
-
2. YoungCheon
08-12-23 (Tue) 10:55真的很烦 尤其每次定义CSS的时候
-
08-12-23 (Tue) 10:56要不这种枯燥的代码怎么看下去啊 要养养眼的 呵呵
-
08-12-23 (Tue) 11:32这个要看DOCTYPE是什么啦
-
08-12-23 (Tue) 12:00在此篇事例里图片上padding是不被支持的，你用CSS在IE6下是无法调用的。除非细化CSS。
你的意思是我在这一篇事例里把什么是DOCTYPE？是标准模式还是诡异模式？还有FF下和IE6下width+padding等属性全部讲出来吗？
hover padding 图片2.已经说清楚了
-
08-12-23 (Tue) 11:18一点不难，就是两张图片叠加而已，呵呵
-
08-12-23 (Tue) 12:45是你想多了吧？
-
08-12-23 (Tue) 12:56难道你真不觉得你想的多吗？
-
08-12-23 (Tue) 13:11呵呵 不多说了 严谨是好事，但不是断章取义，我还不如直接开发一个浏览器呢 -.-
-
19. Shawn
08-12-23 (Tue) 13:16我并不是想断章取义。全因你那句不够严谨的话还被着色强调了。不太了解的人只看那句话会以为 ie6 烂到这个地步了，padding 都不支持。
-
08-12-23 (Tue) 13:21没完了？ IE6还不烂？难道我在这里还要把hack的讨论也加上？
-
08-12-23 (Tue) 13:34说实话，如果你觉得不能接受我这种评论，你可以全部删掉。我只是就事论事，并没有对人。
难道你第一项不叫 hack 吗？第二种情况的 hack 比你第一种还简单，不过看来你不感兴趣。
至于到底谁想多了。我觉得我没想多，因为这不是我的博客。
-
08-12-23 (Tue) 13:38不用删除 让别人看吗 自有公论
-
08-12-23 (Tue) 16:42看来你PS不错嘛 呵呵 直接想到PS的选区
-
08-12-23 (Tue) 21:38好东西 尽量共享啦 谢什么呢 呵呵
-
08-12-23 (Tue) 21:35效果还不错 所以共享了
-
08-12-23 (Tue) 21:31框框你自己可以调，看自己喜欢了
-
08-12-23 (Tue) 22:20呵呵 我实在不懂啊，我应该写IE6，而不是CSS实现图片的效果。
-
08-12-24 (Wed) 12:45你也快乐啊 玩得开心！
-
08-12-24 (Wed) 12:44呵呵 都两个啦 玩得开心啊
-
08-12-24 (Wed) 12:44刚上Q 等会就离开了 快来
TrackPings : 0
- Trackback URL for this entry
- http://www.teikinka.com/css-padding.html/trackback
- Listed below are links to weblogs that reference
- 用CSS达到图片流水效果 From 腾信家
