如何在评论输入框textarea中加入背景图片

在评论输入输入框中,显示一张图片而又不影响文字的输入,其实就是在textarea中加入背景来实现,一般来说,为了好看,当访客进入网站之后,点击textarea时候,背景图片就得消失,所以一共加起来,在评论输入框textarea中加一张图片就包含了以下两个部分。

一、加入背景图片

以本网站为例,找到控制textarea的样式表内容,添加的内容,我已经加粗。

notes .comment-post #comment {
background: #fefefe url(img/comment.gif) no-repeat center;/*控制留言的文本框的背景图片*/

URL中必须写明背景图片的相对路径哈,例如img/comment.gif,如果背景图片都木有,谈啥呢?你的图片不动,怪你自己不弄个能动的GIF啊。

下图就展示了这个效果

1.png

还不知道怎么做?直接写到你的html标签里吧,还是不会,哈哈,找一个谷歌浏览器,打开你的网页,找到你的评论留言的那个大框框,然后右键选择,“审查元素”,然后左边显示的部分就是你网站的textarea的HTML,右边则是样式表,,复制样式表中的重要内容,去你的样式表中找,找到之后,在相应的地方加上上面所说的代码。以下图片仅供参考做法。

2.png



二、当鼠标放入评论输入框textarea中时,让背景图片消失

这个就更简单了,你搜索”textarea背景消失”方法千万种,通过实现的方式也很多,现在只是说一种。

找到你的textarea标签,例如,里面加上下面加粗的代码段即可

<textarea name=”comment” id=”comment” rows=”10″ tabindex=”4″ onfocus=”this.style.backgroundImage=’url()’;” >
</textarea>

这下当你的鼠标当进去的时候,背景是不是消失了呢?

为您推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Captcha Code

4条评论

  1. 刚好有一个疑惑,向大侠咨询下,你的这个改动方式应该是局限于站长,请问作为一个访问者,有没有办法在这个评论框里插入一张背景图呢?

    1. @艾克:肯定可以实现的,问题在于你给了别人上传图片的权力,网站的安全性就很难控制了,建议不要此花哨功能,博客更多的是一种交流