为了节省流量和空间,我把图片都外链到Skydrive上了,所以在日志中插入图片经常要用到“从URL添加媒体文件”这一项。奇怪的是,每次在Wordpress编辑器中用了caption属性的图片都可以完好地显示描述边框,但是发布后无论在Firefox还是在IE各版本下的浏览器都没有这个效果了。这么炫的效果没能实现很可惜,但我一直没有去仔细研究原因。
今天路过别家博客的时候无意中发现别人居然能使用这一效果,我心理一下子就不平衡了,决心也要把这描述边框整出来!在这一点上,Firefox给我们带来了无比的便利,我“偷窥”了一下该站的CSS代码和自己的CSS比较了一下,原来我的主题style.css中没有配备caption的样式,难怪不能实现图片的描述边框了,如此简单的道理却困扰了我这么久。
既然已经“偷窥”了,就索性“偷”个彻底,我把他家的style.css中的caption属性都整理出来安在自家的style.css上了。果然,完美地实现了给日志图片加描述边框的效果,在Firefox下还有个微微的圆角,很不错,自己赞一个。之后我又找到在Wordpress的官方网站上也有这段代码的介绍,喜欢这个效果的朋友直接把下面的代码复制到style.css中就可以了,你也可以根据需要稍加修改。
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
最后,展示一下使用caption属性给图片加描述边框前后的效果对比。
不使用caption属性,没有边框,alt描述不可见:

使用caption属性,有边框,alt描述可见:

Life Studio-Logo
-
正式向 DIV+CSS 进军2010年01月27日 -
JS 实现放大镜产品展示效果2009年11月5日 -
用 CSS 给图片添加水印效果2009年10月29日 -
Wordpress 在 Feed 中实现图文混排2009年10月21日
Pingback: 如何在 WordPress 中插入表格 – 2哥博客|H3CIE|网络技术|数据中心|路由交换|网络安全|黑客技术|CCIE|Linux|服务器|wordpress|——人要耐得住寂寞,经得起诱惑
Pingback: 如何在 WordPress 中插入表格 – 2哥博客|H3CIE|网络技术|数据中心|路由交换|网络安全|黑客技术|CCIE|Linux|服务器
我原来的也有caption这玩意,可是发现在greader中变形了后,我就不用了
这个不错~~
不错不错。
这个效果确实不错!
我这就拿走了.
呵呵,尽情地拿吧,写了就是给人拿的
很华丽的,真不错。看来我得好好学习了。
哈哈,扯图片我就是585宽度,别的效果不准备加~
整太多眩晕的特效并不好!
这个是CSS效果,不用JS,不影响速度,有啥不好呀?
而且将alt描述显示出来,有利于SEO,何乐而不为呢?
这个效果确实不错,但是我为什么就不喜欢涅。
呵呵,这要根据个人喜好的嘛,这个效果有时候确实比较实用的
恩,这个效果不错的
Pingback: 0blog
Pingback: [电脑数码]用caption属性给图片加描述边框