这篇博客所完成的事情花了我很久的时间。

看板娘的透明度

之前看板娘的透明度我在网上找了很久都没找到相关教程，之前也看到有一些人的博客的看板娘是透明的，按照一些人的代码来看，应该在站点配置文件里面加入

react:defaultOpacity: 0.8hoverOpacity: 1

但代码加入后并没有什么用，于是我便考虑在…/themes/next/source/css/custom/custom.styl中直接通过css代码来修改看板娘的透明度。
那么问题就来了，当初我找不到看板娘的id或者class，我通过chrome的F12下通过鼠标移动来查看class和id的方法根本就移动不到看板娘上面，如图：

即使我把鼠标移动在血小板上面仍然显示的是其他的标签，后来我硬是会觉得不透明有时候缩放什么的会挡住字，不太好，于是还是不打算放弃(๑•̀ㅂ•́)و✧，在F12里面直接看文件的html代码，当我把所有的标签全部最简化的时候，我终于发现了看板娘的标签。

当时内心十分高兴的_(:3 」∠ )_，于是边马上在custom里面加上了如下代码：

.live-2d-widget {opacity: 0.9;
}

保存后发现并没有透明，我才发现原来它这个style是内联的，哇，很难受，我只知道内联的优先级比外面的css代码的优先级高，所以当时又无可奈何了，于是开始了我的面向百度的编程，后面搜到优先级最高的是!important，于是在css里面加上了如下代码

.live-2d-widget {opacity: 0.9 !important
}

于是便大功告成了。(๑•́ ₃ •̀๑)

移动到头像上面显示另外一个照片

本人做这个的目的纯属只是为博客增加一点新意，我是打算将鼠标移动在我头像上面就可以笑起来的那种，上图：

这个就花了我很长的时间，首先我得要P图，这个还好，把眼睛抠出来之后直接填充掉然后再把眉毛抠出来填充掉再移动就可以了。比较烦的就是我P完之后当时硬是不知道怎么做。我试过如下方法：

失败的方法1：直接利用hover进行background-image修改

这是我最先用的方法，但我查看源码：
之后发现，它已经是直接插入了，不能修改成background插入。所以最终这个方法失败了。

失败的方法2：尝试通过jQuery的mouseenter事件和mouseleave事件进行图片变换

这是我第二个想到的方法，我打开…/themes/next/source/js/post-details文件，我一看到这一串代码，我就想，噫，这很像jQuery的代码哟？太爽了把(๑•̀ω•́๑)，于是我便在这后面利用jQuery事件进行修改，保存之后发现原网页并没有变化，我当时就有点懵了，于是上网查查scrollspy方法，发现jQuery并没有这种方法，也就是说，原网页用的并不是jQuery的代码，也没有引入jQuery库，所以根本无法使用jQuery里面的方法。然后又发现这居然是bootstrap里面的滚动监听事件，额，由于bootstrap没学，我也就短短的看了几下有哪些事件，发现好像还是不能完成我的那种要求（我并没有仔细学），于是这个方法也失败了(´;ω;`)。

失败的方法3：利用js dom的onmouseover和onmouseout事件。

我想着这里面有var，有function，有if语句什么的，我想这里面也有js语句把，我大概看了一下用法，发现要在原html的标签里面加入代码，但不能修改，所以这方法也失败了 : c。

失败的方法4：百度的答案在css后面加入expression表达式加入event事件。

不多说了，上图：

我尝试着改了他的格式进行代码增加，但保存后还是没用（或许是我用的方式不对吧），后面我也查了css的expression的有关知识，据说曾经的浏览器支持expression表达式，但由于过于占资源等问题在IE8被微软弃用了，后来我在百度知道上问了关于expression的知识，也没有什么结果。

最后，终于成功了5555ε(*´･∀･｀)зﾞ

万能的百度，我最终在百度大神的指导下了解了一种思路：由于情况的特殊，可以利用hover当鼠标移动在头像上的时候直接将透明度设置为0。然后设置其父系的background的大小和位置以及不能重复的属性（这个要调一会儿，因为要对比，使background图片完全在头像下面，大小要合适）。最终终于大功告成了！！！哈哈啊哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈(๑´·ㅂ·｀๑)，前端真的很强大鸭~

自定义博客--看板娘透明度以及鼠标移动在头像上的变化相关推荐

使用Hexo的helper-live2d插件自定义博客看板娘
经常逛别人博客都会看到看板娘,但是那些看板娘我都不太喜欢.度娘搜了搜Hexo看板娘教程来来去去都是使用live2d-widget-models提供的那几个模型,昨天偶然在gitee上看到了少女前线的L ...
【插件】博客 - 看板娘
文章目录 # 入门 # 进阶 # 归档 # 入门转载 - https://www.cnblogs.com/dxdblog/p/10255503.html 示例: 代码: <!-- 看板娘 -- ...
Docker系列 WordPress系列国服最强博客看板娘没有之一
转自我的个人博客https://blognas.hwb0307.com.欢迎关注! 前言在<Docker系列 WordPress系列特效>教程中,你应该已经学会怎么使用一个CDN看板娘 ...
我更新了博客看板娘 | 小埋UMR
背景最近博客的图片用上了又拍云CDN,网站加载速度快了不少.网站整体在1~2s之间就能完成加载,除了我的shizuku看板娘. 平常加载她需要6~7s的时间,而且每次切换页面,比如进入文章之类的操作 ...
hexo博客看板娘无法更换类型或其他设置
问题描述: 最近在hexo个人博客中加入看板娘时,发现了无论我如何修改配置如下: live2d:# 是否开启enable: truepluginModelPath: assets/model:use ...
【live2d】博客看板娘live2d！
意外发现live2d这种好东西,当然得收集点model玩一玩啦. 但听说原创model要大几千,所以还是网上找点别人的老婆过来吧. 先给我的盘连接~不知道这里面有没有放我收集的model,可能没有链 ...
博客园自定义博客侧边栏公告的过滤漏洞
温馨提示:本文章所提到的相关技术以及代码仅供学习交流,不可用来做违法或违反博客园相关规定的事情哦~而且本文章不许转载哦,请使用超链接. 来博客园已经有些日子了,博客早就申请了下来,在后台偶然看到了可以 ...
可爱的博客园样式美化、自定义博客园主题样式
cute-cnblogs 说明 "我经常有那种感觉,如果这个事情来了,你却没有勇敢地去解决掉,它一定会再来.生活真是这样,它会一次次地让你去做这个功课直到你学会为止." -- &l ...
博客园页首html代码,可爱的博客园样式美化、自定义博客园主题样式
cute-cnblogs 说明 "我经常有那种感觉,如果这个事情来了,你却没有勇敢地去解决掉,它一定会再来.生活真是这样,它会一次次地让你去做这个功课直到你学会为止." -- &l ...

自定义博客--看板娘透明度以及鼠标移动在头像上的变化