看到很多朋友的博客评论框里都有个背景图片,觉得很好玩,于是自己也加了一个上去。现在,诸位看官可以看看文章下面的评论框,会发现右下角有一张图片。搞定这个还是费了我不少力气的,下面把实现过程给大家讲一下(以我使用的Wordpress为例,其他博客程序大同小异)。当然,这对那些高手来说简直是小菜一碟。
首先找到评论框由什么代码控制的,通过查看源代码得知,是由textarea在控制,textarea本身有背景图片的属性,不过,现在都流行CSS,我们就用CSS来完成吧。
在我的博客中,评论框textarea的ID为comment(也有的把ID写成Class,是一样的),进入样式表(style.css),找到#comment附近的代码,可以看到原来的代码是:
#comment {width:90%}
用下面的代码替换掉上面的:
#comment {width:90%;background-image: url(https://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格式。
发表回复