如何设置博客首页显示透明的人物图像

在个人博客的设置里,页脚HTML代码内输入以下内容:

<script src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js"></script>

<script>

L2Dwidget.init({
"model": {
//jsonpath控制显示那个小萝莉模型,替换时后面名字也要替换掉,比如换成live2d-widget-model-chitose这个模型时,live2d-widget-model-shizuku和shizuku.model.json,要修改为live2d-widget-model-chitose和chitose.model.json
jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",
"scale": 1
},
"display": {
"position": "left", //小萝莉的出现位置
"width": 100, //小萝莉的宽度
"height": 177, //小萝莉的高度
"hOffset": 0,
"vOffset": -20
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 0.7,
"opacityOnHover": 0.2
}
});
</script>
<!-- 人物图像效果可替换的模型有:

live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16
-->

按照此设置后,页面效果如图所示:

 

欢迎关注我的博客,获取更多精品知识合集

如果觉得对您有帮助的话,请帮我点赞、分享!您的支持是我不竭的创作动力!

欢迎关注我的公众号,获取更多技术知识分享

posted @ 2020-08-16 00:12  李润  阅读(315)  评论(0编辑  收藏  举报