给Typecho 博客评论框添加滑动背景图
标签搜索

给Typecho 博客评论框添加滑动背景图

艾霂
2024-03-18 / 0 评论 / 52 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2024年03月18日,已超过30天没有更新,若内容或图片失效,请留言反馈。

出于我对Typecho的热爱,我经常会折腾一些东西来装饰一下我的博客,这不就倒腾出评论框背景图了吗,还自带滑动功能让平平淡淡的评论框别有一番风味。

主要以css实现,此代码适合各种主题并且都是通用的,这里艾霂以 Joe 主题为例:

效果:

评论框背景图

css代码:

/*博客评论框背景图*/
.joe_comment__respond-form .body{padding:15px;background:url(https://cdn.aeink.com//content/uploadfile/201709/AEimg-1506176592-4.jpg);background-position:right;background-repeat:no-repeat;resize:none;}
.joe_comment__respond-form .body:hover{background-position-x:4000px;transition:ease-in-out 2s;}

.joe_comment__respond-form .body 就是评论框主题,可以直接在前端按F12查看自己主题的是哪个组,自己来进行修改。

背景图片:

背景图片
背景图片
最好自己把背景图片保存下来以防失效,或者自己更换欣怡的背景图。

7

评论 (0)

一言
取消