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

最新推荐文章于 2022-04-19 18:36:04 发布

机智豪SAMA

最新推荐文章于 2022-04-19 18:36:04 发布

阅读量1.2k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：自学旅程

本文链接：https://blog.youkuaiyun.com/weixin_43849588/article/details/89321994

自学旅程专栏收录该内容

44 篇文章

订阅专栏

这篇博客记录了作者在自定义博客时遇到的挑战，包括如何调整看板娘的透明度和实现鼠标悬停头像时显示不同照片的交互效果。经过多次尝试和失败，最终通过CSS的!important解决透明度问题，并通过hover改变背景图片实现头像交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

看板娘的透明度

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

react:
    defaultOpacity: 0.8
    hoverOpacity: 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图片完全在头像下面，大小要合适）。最终终于大功告成了！！！哈哈啊哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈(๑´·ㅂ·｀๑)，前端真的很强大鸭~