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

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

8月 16th, 2010 | Filed under 网站应用 | 共有8,732次浏览

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

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

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

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

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

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

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. 泰国清新电影
    6月 24th, 201300:39

    挺好的,但是我想要的是背景图层的最前端显示,

  2. suN
    1月 29th, 201210:56

    很漂亮!!!

  3. 让让在线
    11月 1st, 201120:06

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

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

  5. cgrabbit
    12月 28th, 201021:01

    学习了 谢谢!哈哈

  6. sem
    12月 21st, 201019:28

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

  7. 书记
    9月 18th, 201019:51

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

  8. liveasx
    9月 1st, 201004:59

    这个是很不错的!!!

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

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

  10. 亿品元素
    8月 27th, 201013:32

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

  11. feelmelove
    8月 24th, 201020:34

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

  12. 秦大少
    8月 20th, 201017:34

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

  13. oogps
    8月 20th, 201009:15

    这个背景不错。。

  14. Ebo
    8月 19th, 201022:40

    偶怎么都不能让它居中。

  15. 雅岚
    8月 18th, 201023:16

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

  16. A.shun
    8月 18th, 201020:55

    这个很多新手估计需要~

  17. 雅岚
    8月 18th, 201015:57

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

  18. 小魏
    8月 17th, 201016:53

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

  19. 私爱
    8月 17th, 201015:45

    学习了谢谢分享

  20. Ray
    8月 17th, 201014:26

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

  21. 卢松松
    8月 17th, 201014:20

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

  22. 万戈
    8月 17th, 201013:31

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

  23. 记忆盒子
    8月 17th, 201013:09

    恩,都是这么干的!

  24. imfigo
    8月 17th, 201011:22

    呵呵,挺好的小功能。

  25. 流行童装
    8月 17th, 201010:29

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

  26. 红心草
    8月 17th, 201010:07

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

  27. 妮裳神话
    8月 17th, 201009:59

    嘿嘿!我来学学

  28. 严重浪漫
    8月 17th, 201001:03

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

  29. 自由人
    8月 17th, 201000:22

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

  30. 飞晏
    8月 16th, 201023:54

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

  31. 学夫子
    8月 16th, 201022:53

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

  32. zwwooooo
    8月 16th, 201022:07

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

  33. Bee君
    8月 16th, 201021:50

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

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

  34. 软件盒子
    8月 16th, 201021:19

    如何让某个评论至顶呢

  35. 奶牛
    8月 16th, 201021:18

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

  36. ifenwen
    8月 16th, 201020:45

    都用上了啊

  37. 醉美点金
    8月 16th, 201019:40

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

  38. coolicer
    8月 16th, 201019:28

    同行?呵呵

  39. 集趣
    8月 16th, 201018:42

    这个应该属于高级教程了

  40. 雅岚
    8月 16th, 201018:23

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

  41. Code之行人
    8月 16th, 201018:22

    节日快乐

  42. 创享·生活
    8月 16th, 201018:20

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

  43. chinallww
    8月 16th, 201018:08

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

  44. shekck
    8月 16th, 201017:28

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

    • 园子
      8月 16th, 201018:00

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

您必须在 登录 后才能发布评论.