1.美化你的Flare(设置FLare自定义背景图)

谷歌不知道

已于 2025-02-06 17:06:10 修改

阅读量463

点赞数 3

分类专栏：从0开始的Flare个人导航说明手册文章标签： html5 笔记经验分享

于 2025-02-06 15:42:13 首次发布

本文链接：https://blog.csdn.net/qq_58403475/article/details/145474518

版权

从0开始的Flare个人导航说明手册专栏收录该内容

4 篇文章

订阅专栏

如你所见，这是Flare的默认主题，轻便简约

如果你受够了黑白,还有其他十四款主提供你选择

但如果你不满足于纯色背景，不妨来接着往下看

教程来自“什么值得买”的“一锋0666”大佬，原文地址

首先，点击主页的设置按钮，进入settings页面

点击界面，点击自定义页脚

粘贴以下代码（原代码由AI生成，博主自行改正了一些错误）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>插件容器示例</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -1;
            background-image: url('https://bing.img.run/rand.php'); /* 必应随机壁纸 */
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            filter: blur(0px); /* 图片模糊程度，0为不模糊 */
        }
        .plugin-container {
            background-color: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(0, 0, 0, 0.1); /* 背景框颜色及透明度 */
            border-radius: 10px;
            padding: 20px;
            box-sizing: border-box;
            margin: 0 auto;
            max-width: 1200px;
        }
        .content {
            text-align: center;
            color: #333;
        }
        .content h1 {
            font-size: 2em;
            margin-bottom: 20px;
        }
        .content p {
            font-size: 1.2em;
            margin-bottom: 40px;
        }
    </style>
</head>
</html>

点击底部保存按钮，成功后立即生效

如果想还原页脚，将源代码添加到顶部即可

由 <a href="https://github.com/soulteary/docker-flare">Flare</a> ❤️ 强力驱动

但如果，你不喜欢必应的随机壁纸，想自定义。比如在逛AcFun、B站、小黑盒或者小红书、抖音，看到一张特好看的高清壁纸，打算拿来做背景图。该怎么办呢？这里我们以初音未来壁纸为例

点击图片加载原图，或者右键，查看原图

~~复制图片地址~~【警告：此方法已失效，具体请看文章末尾】

把刚刚粘贴的在自定义页脚的，第21行代码中的url地址替换一下。注意！不要删掉分号！

background-image: url('https://bing.img.run/rand.php');<!--必应随机壁纸-->

完成后点击底部保存就能看到背景生效了

*注意

一定要在点击大图或查看原图后再复制图片地址，不然设置的背景图会很糊（网站为节省带宽会默认展示缩略图，这里就不展开讲了）

（未点击原图设置的背景图↑）

（点击了原图后设置的背景图↑）

之后，我们再照旧在设置界面选择好清晰的主题就大功告成了

主题：Onedark

悲报，鼠鼠下班后回宿舍打开网站发现睿站把鼠鼠的域名屏蔽了(；′⌒`)而且不仅miku这张不给用，是所有的图图都不给用了(。>д<)

现在只能启用备用办法了(；´д｀)ゞ

1.把自己喜欢的图片下载下来（一定要下载原图，不然会非常糊）

2.上传到图床上

具体使用什么图床、选哪家全看个人心情，网上有很多人推荐。

不建议看知乎的，里面推荐的图床虽然免费，但大陆地区很难加载，容易背景页“难产”，也不建议使用百度靠前的广告产品，往往需要会员/绑定手机号/实名认证，而且SEM的推荐位跑路很快，一旦远程服务器关机，这张图自然也加载不出来了

3.上传后点击右侧复制就可以了

4.剩下的步骤和前面一样，把刚刚复制的链接，粘贴并替换第21行代码中的url地址就行了

background-image: url('https://pic.imgdb.cn/item/67640fd7d0e0a243d4e6acf8.jpg');<!--必应随机壁纸-->

不想折腾注册图床的也可以复制我的链接：https://pic.imgdb.cn/item/67640fd7d0e0a243d4e6acf8.jpg

需要注意的是，这张MIKU图从2M被图床压缩到了408Kb,而且这张图会把框外的白色文字混在一起，介意的话建议更换其他图床或背景图