最近在用jquery插件做一些网页特效,发现jquery boxy弹出特使框挺不错的,在它的官网
(官方地址 http://onehackoranother.com/projects/jquery/boxy/)
上它看到实例效果不错,就下了源码来,可是在本地打开测试时发现,弹出框的圆角图片不显示,在网上找了很多资料,也没搞清楚。于是就耐下心来自己找问题,毕竟自己动手,丰衣足食嘛:)
其实很简单,就是它的css样式表引用图片的路径问题。
找到它的样式表:boxy.css
其中有几段中引用了圆边的图片
.boxy-wrapper .top-left { background: url('../images/boxy-nw.png'); }
.boxy-wrapper .top-right { background: url('../images/boxy-ne.png'); }
.boxy-wrapper .bottom-right { background: url('../images/boxy-se.png'); }
.boxy-wrapper .bottom-left { background: url('../images/boxy-sw.png'); }
/* IE6+7 hacks for the border. IE7 should support this natively but fails in conjuction with modal blackout bg. */
/* NB: these must be absolute paths or URLs to your images */
.boxy-wrapper .top-left { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/boxy-nw.png'); }
.boxy-wrapper .top-right { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/boxy-ne.png'); }
.boxy-wrapper .bottom-right { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/boxy-se.png'); }
.boxy-wrapper .bottom-left { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/boxy-sw.png'); }
DXImageTransform.Microsoft.AlphaImageLoader的方法是使用透明图片,但是它的SRC的图片地址不会追寻CSS的路径,所以要使用绝对路径或完整的URL路径