爱好者 > Typecho > ACG相关 > 博客被人丢进了雷姆

博客被人丢进了雷姆

作者:佚名 来源:爱好者 时间:2016-07-03

文章已更新,详情移至《左雷姆右拉姆至顶至底源码

雷姆 (“Re:从零开始的异世界生活”中的人物)
雷姆,轻小说《Re:从零开始的异世界生活》及其衍生作品的登场角色,在罗兹沃尔的宅邸中一手担当全部杂务的双胞胎女仆中的妹妹,貌恭而实不敬的毒舌担当;宅邸的机能得以维持,可说是完全仰仗她的有能。

昨天在手机上看到了这两张图片:

雷姆.jpg-50 雷姆喵.jpg-50

当时我就灵光一闪,这个加在博客的左下角,必定是极好的。于是实现了下,效果见博客右下角(手机等窄屏端看不到哦)

图片部分:
于是下载原图,ps把白色背景p成透明,把图片尺寸改为75*55,最后上传图片。

代码html部分:

<div class="sidebar_wo"> <img src="图片一链接" alt="雷姆.png" onmouseover="this.src='图片二链接'" onmouseout="this.src='图片一链接'" id="audioBtn"> </div>

代码css部分:

.sidebar_wo{ position: fixed; bottom: 0px;//让图片固定到网站底部 left: 0;//让图片靠左 z-index: 1; } @media only screen and (max-width:767px){ .sidebar_wo{ display: none;//屏幕尺寸小于767px时隐藏雷姆 } }

css部分大致是这样,根据你的模板不同可能会需要稍加改动。

我的博客的雷姆点击会有背景音乐哦,背景音乐这里就不提了哈,网上也有很多教程哈。