如何在评论输入框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>

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

THE END
打赏
海报
如何在评论输入框textarea中加入背景图片
在评论输入输入框中,显示一张图片而又不影响文字的输入,其实就是在textarea中加入背景来实现,一般来说,为了好看,当访客进入网站之后,点击textarea时候,背景图片就得消失,所以一共加起来,在评论输入框te……
<<上一篇
下一篇>>