前篇我们讲了如何修改typecho的默认头像,但我们的步伐并不只局限于此,于是我们把目光看向了空荡荡的评论框.此时博主已经露出了邪恶的笑容.....

魔改Typecho系列之神奇的评论框

首先,我们要魔改评论框,然后我们得先找到评论框的HTML元素长啥样.我们首先打开chrome(非必须),其他任何有开发者工具的浏览器都是OK的.

然后找到一个有评论框的页面,右键狠戳它!对!就是狠戳你的评论框!然后,他长这幅吊样子 ↓
评论框元素

第二步,想办法把我们的小姐姐↓
评论框小姐姐

塞进评论框里,我一开始的想法是把评论框也就是我们的textarea,背景透明,然后把图扔后面.但,我他喵的转念一想,他喵喵锤的,我能把textarea弄透明,那我直接把图定好位作为背景不就行了2333333

所以....解决方案是,继续找评论框元素的css代码.继续检查元素,找到这货 ↓
评论框

康!我右边高亮突出的部分就是我们的评论框CSS代码啦!我们之前说到,把小姐姐塞进评论框只需要两步,那么到了第二步了.我们需要给textarea加一个background的值.具体塞那个文件就要看你的主题里这部分css塞那个文件了.检查元素真香嚯嚯嚯 = ̄ω ̄=

background: url(../img/comment.png) right bottom no-repeat; //url是你评论框要设置的背景图片地址

其中,right这部分是决定让你的小姐姐呆在评论框的哪一头的,有leftrightcenter三个选项,分别对应着左中右.

而bottom,是让你的小姐姐呆在评论框底部的,可选的属性有topcenterbottom.分别对应着上、中、下三个位置.

最后no-repeat,其作用是控制你小姐姐的重复属性的,有repeatrepeat-xrepeat-yno-repeat这么几个,分辨是复制以铺满你的评论框,以x轴复制,以y轴复制,还有不复制(保留一个本体),这么几个选项.

更详细的就去参考CSS/HTML语法.嘤

如此一来,我们就完成了添加啦!!
完成展示

本文作者:LaoCloud
本文链接https://blog.laoooo.cn:88/index.php/archives/310/
版权声明:如无特别声明,本文即为原创文章,仅代表个人观点,版权归 LaoCloud 所有,未经允许不得转载!