当前位置:园子博客 » 网站应用 » 如何给网站的评论框添加背景图片

如何给网站的评论框添加背景图片

八 16th, 2010 | Filed under 网站应用 | 共有2,977次浏览

很多博客的评论框都添加了自定义的背景图片,借此来激发访客评论的欲望。今天园子就分享下给网站的评论框添加背景图片的方法。

这也是应博友@严重浪漫的要求写的,其实为评论框添加个背景图片有诸多好处,最直接的就是激发访客评论的欲望,因为无评不博嘛。另外就是看上去比较个性,大家都看到的是千篇一律的白色背景,如果突然来了个个性的文字提示,一定会为你的评论功能增色不少。

园子博客目前采用的背景图片如下图所示:

园子博客评论框目前采用的背景图片

园子博客评论框目前采用的背景图片

给网站的评论框添加背景图片的方法

1.首先就是做个你认为比较个性的图片,打上字,保存成任意格式的图片文件即可,你也可以直接用园子上面提供的图片,直接另存即可。

2.把图片上传到你主题目录的图片文件夹中,一般默认是images或者img。

3.打开主题中的 css 文件,一般是 style.css。查找以 #comment 命名的样式,将其样式中添加如下一行样式:

background:#FFFFFF url(images/comment_bg.gif) no-repeat scroll center center;

其中的图片文件 comment_bg.gif,就是你刚刚制作的图片文件名称。

4.上传所有修改过的文档后,按 CTRL+F5 强制刷新页面,即可看到你的评论框已经有了你所自定义的背景图片了。

园子友情提醒:

自己做图片的时候注意调整下整体图片的透明度,一般透明度保持在30左右即可,这样看起来不会太突兀,有主次之分,视觉效果最好。

  1. suN
    一 29th, 201210:56

    很漂亮!!!

  2. 让让在线
    十一 1st, 201120:06

    再问个问题啊,你网站在浏览其中打开的那个标志是怎么弄上去的?

  3. 这个没仔细看还真的不知道。
    园子
    你是不是去靠驾驶证了?

  4. cgrabbit
    十二 28th, 201021:01

    学习了 谢谢!哈哈

  5. sem
    十二 21st, 201019:28

    我也加上。哈哈,总想弄,这回方便了

  6. 书记
    九 18th, 201019:51

    好的,用上了哈……谢谢……

  7. liveasx
    九 1st, 201004:59

    这个是很不错的!!!

  8. 站长实验室
    八 27th, 201016:15

    这样修改下css就可以了啊。。

  9. 亿品元素
    八 27th, 201013:32

    把你图片拿走了,本来想自己设计个,懒了

  10. feelmelove
    八 24th, 201020:34

    为什么我在 style.css。找不到以 #comment 命名的样式?未成功,5555

  11. 秦大少
    八 20th, 201017:34

    这个不错,一直都想要这个效果来着!谢啦!

  12. oogps
    八 20th, 201009:15

    这个背景不错。。

  13. Ebo
    八 19th, 201022:40

    偶怎么都不能让它居中。

  14. 雅岚
    八 18th, 201023:16

    园子,为何我的背景图片没有显示出来,555555….
    (妖女岚垂头飞走….)

  15. A.shun
    八 18th, 201020:55

    这个很多新手估计需要~

  16. 雅岚
    八 18th, 201015:57

    妖女岚又来看一遍。。。
    准备今天折腾下,嘿嘿。。。。

  17. 小魏
    八 17th, 201016:53

    很好的呀!可以参考小魏的博客!

  18. 私爱
    八 17th, 201015:45

    学习了谢谢分享

  19. Ray
    八 17th, 201014:26

    哈哈,教程写的很不错,虽然俺已经会了。

  20. 卢松松
    八 17th, 201014:20

    哈哈 对css不了解的人都经常问

  21. 万戈
    八 17th, 201013:31

    简单而实用的效果呀,我也加上了

  22. 记忆盒子
    八 17th, 201013:09

    恩,都是这么干的!

  23. imfigo
    八 17th, 201011:22

    呵呵,挺好的小功能。

  24. 流行童装
    八 17th, 201010:29

    这个方法的确很好使,学习了。

  25. 红心草
    八 17th, 201010:07

    学习了,改天给自己的加上试试。

  26. 妮裳神话
    八 17th, 201009:59

    嘿嘿!我来学学

  27. 严重浪漫
    八 17th, 201001:03

    效率很高啊,谢谢了。
    看来我错了,一开始我以为那几个字都是通过CSS实现的效果呢。

  28. 自由人
    八 17th, 201000:22

    我还是喜欢我的评论框白白净净的 呵呵~~

  29. 飞晏
    八 16th, 201023:54

    加图片没问题
    可惜我不会做 呵呵

  30. 学夫子
    八 16th, 201022:53

    互联网的精神就在于分享,做的不错,虽然我用的是emlog,但是都是大同小异的

  31. zwwooooo
    八 16th, 201022:07

    哈哈,设置一下css加个背景图片就ok了

  32. Bee君
    八 16th, 201021:50

    这个教程实用,不过之前一搜,就搜到很多~

    我一般用png图片~不过应该在IE6有点问题~不管了~

  33. 软件盒子
    八 16th, 201021:19

    如何让某个评论至顶呢

  34. 奶牛
    八 16th, 201021:18

    嘿嘿,奶牛回来咯。
    效果蛮不错的说~~~

  35. ifenwen
    八 16th, 201020:45

    都用上了啊

  36. 醉美点金
    八 16th, 201019:40

    一直想用这个,学习了,不介意原搬过去吧!

  37. coolicer
    八 16th, 201019:28

    同行?呵呵

  38. 集趣
    八 16th, 201018:42

    这个应该属于高级教程了

  39. 雅岚
    八 16th, 201018:23

    吼吼,不错也。。。。
    晚上妖女我来折腾折腾,嘿嘿。。。
    也祝园子七夕快乐哦。。。。

  40. Code之行人
    八 16th, 201018:22

    节日快乐

  41. 创享·生活
    八 16th, 201018:20

    呵呵..这么大的照片,大少应该很大吧??

  42. chinallww
    八 16th, 201018:08

    好东西,加个背景漂亮多了.

  43. shekck
    八 16th, 201017:28

    我也加上了背景图片了,效果的确不错
    另外我挺想知道怎么样加上网站的图标favicon的,呵呵

    • 园子
      八 16th, 201018:00

      @shekck
      有教程的哈:
      http://www.yzznl.cn/archives/212.html

提示: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者,请注意评论者名称大小写要一致。

无觅相关文章插件,快速提升流量