A-A+

在主题中启用Image Captions

2008年12月10日 Wordpress 评论 11 条 阅读 4,900 views 次

刚才在写《现居住的房子 》时,在后台编辑图片用到了caption这个标签,发布后发觉图片没有了在后台时看到的效果。于是乎查找了一番,终于找到了那段CSS,看看下图效果,还有圆角:

我的房间,最大的房间

我的房间,最大的房间

其实靠的就是下面这段css:

.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
-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;
}

上面代码中红色部分并不是标准的CSS代码,在W3C CSS 校验器中会报错,但那部分正是实现圆角的关键所在。加不加就看你了。据说这是wordpress2.6的新功能 ,叫做图片标题(Image Captions)。

启用方法:将上面那段代码放入到你主题style.css文件中即可。

11 条留言  访客:6 条  博主:5 条

  1. nipao

    FF好像有错乱,那个G广告的原因

    • Johnny

      @nipao, 是的,是给那个GGAD弄错乱了

  2. Eden

    要是有一个强大的插件,可以在贴图的时候自动添加水印该多好。主要还是我懒。

    • Johnny

      @Eden, 是有这样的一个插件的,貌似叫“Super Image” 🙂

  3. 林晨

    挺不错的,改天我也放一个现在居住的环境出来

    • Johnny

      @林晨, 支持一下。其实记录下生活也蛮不错的。 😛

  4. longlan

    好效果哦!顶一个拿走了!

  5. a71.cn

    为什么我的ie和firefox都看不到图片的圆角效果,不过你的googel广告到是圆角了!

    • Johnny

      @a71.cn, 估计那段代码因为这样不能纳入w3c标准吧 😐

      • a71.cn

        @Johnny, 你不会时刻在线吧!!强人啊!我正在对照我的css文件试验下你的代码!

        • Johnny

          @a71.cn, 呵呵,我每天在线的时间还是很多的,周末除外。

给我留言

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。

Copyright © 寂寞部屋 保留所有权利.   Theme  Ality

用户登录