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

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

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

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

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

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

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

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左右即可,这样看起来不会太突兀,有主次之分,视觉效果最好。

如何给网站的评论框添加背景图片》上有50条评论

发表评论