欢迎光临【伪医生律师的博客】(@陈大猫的博客)。

设置博客评论框的背景图片

技术文档 陈大猫 199℃ 0评论

看到很多朋友的博客评论框里都有个背景图片,觉得很好玩,于是自己也加了一个上去。现在,诸位看官可以看看文章下面的评论框,会发现右下角有一张图片。搞定这个还是费了我不少力气的,下面把实现过程给大家讲一下(以我使用的Wordpress为例,其他博客程序大同小异)。当然,这对那些高手来说简直是小菜一碟。

首先找到评论框由什么代码控制的,通过查看源代码得知,是由textarea在控制,textarea本身有背景图片的属性,不过,现在都流行CSS,我们就用CSS来完成吧。
在我的博客中,评论框textarea的ID为comment(也有的把ID写成Class,是一样的),进入样式表(style.css),找到#comment附近的代码,可以看到原来的代码是:

#comment   {width:90%}

用下面的代码替换掉上面的:

#comment    {width:90%;background-image:    url(http://chidd.net/upload/comment-bg.gif);background-repeat:   no-repeat;background-position:   right bottom}

说明:

1.在CSS样式表里需要找到的是控制评论框控件的ID或Clsss名字,我这里是comment,但不是每个人的都一样。
2.background-image后面跟的是背景图片的URL地址,绝对和相对的都行。
background-repeat属性表示是否重复,no-repeat为不重复,默认为重复。
background-position属性控制的是图片的位置,前面一个参数表示左右位置,后面一个表示上下位置,bottom的意思是向下对齐。
3.背景图片大小都可以,图片的背景最好是透明的,用PNG或者GIF格式。

转载请注明:伪医生律师的博客 » 设置博客评论框的背景图片

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (6)

  1. 这个背景图片太难看了
    Jason Ng2007-12-26 14:30 回复
  2. 说实话,加咯还没有不加好看~~
    一剑2007-12-26 15:31 回复
  3. 汗
    陈 华2007-12-26 15:45 回复
  4. 回Jason Ng 一剑: 换了张图片,现在效果如何?
    陈 华2007-12-26 16:19 回复
  5. 路过,顶一下!
    shine2007-12-27 00:01 回复
  6. 不错~~~~
    suN2012-01-29 11:08 回复