Hexo之更換背景及透明度

Hexo系列文章已經完成上傳：
一、Hexo准備---Node.js、Vue
二、Hexo、主題、部署上線
三、Butterfly美化
四、Hexo之更換背景及透明度
五、Hexo-使用阿里iconfont圖標
六、PicGo：搭建圖床
七、Hexo-域名設置+收錄

引入方式

首先，介紹一下引入方式，外部導入css文件，不影響內部配置。

1.創建css文件

創建一個css文件移動到\themes\butterfly\source\css目錄下。

2.引入

inject在\source\_data的butterfly.yml中：

（如果沒有，可以創建一個_data文件夾，將\themes\butterfly中的 _config.yml復制過去，重命名為butterfly.yml）

按以下方式引入css文件。

<link rel="stylesheet" href="/css/mycss.css">

修改透明度

將以下代碼復制到你所創建的css文件,引入即可。

/* 文章頁背景 */
.layout_post>#post {
    /* 以下代表透明度為0.5 可以自行修改*/
    background: rgba(255,255,255,.5);
}

/* 所有頁面背景 */
#aside_content .card-widget, #recent-posts>.recent-post-item, .layout_page>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_post>#post{
    /* 以下代表透明度為0.5 */
    background: rgba(255,255,255,.5);
}

1.透明度為0.1

.layout_post>#post {
    background: rgba(255,255,255,.1);
}

2.透明度為0.5

.layout_post>#post {
    background: rgba(255,255,255,.5);
}

3. 0 全透明

.layout_post>#post {
    background: rgba(255,255,255,0);
}

更換博客背景

1.背景div

butterfly主題的背景div的id為web_bg，因此我們只需要重新定義這個樣式即可。

#web_bg{  }

2.圖片背景

#web_bg {
  /* 背景圖像的地址（url括號里）  */
  background: url();
  /* 背景圖像不重復 */
  background-repeat: no-repeat;
  /* 背景圖像大小 */
  background-size: cover;
}

3.背景漸變

1.博客同款

本博客同款,在創建的css文件中復制以下代碼:

#web_bg {
background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
}

2.動態漸變

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
#web_bg {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

3.紫藍色漸變

#web_bg {
    background: linear-gradient(to right bottom, rgb(0, 255, 240), rgb(92, 159, 247) 40%, rgb(211, 34, 255) 80%);
}

4.圖片漸變

第二個url中是圖片地址，可以自行修改。

#web_bg{
    background-image: url("https://ae01.alicdn.com/kf/H18a4b998752a4ae68b8e85d432a5aef0l.png"), linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url("https://upimage.alexhchu.com/2020/10/19/34446d0d37dde.jpg");
}

5.自行選擇

大家可以選擇上述漸變，當然也可以自行選擇：

以下是兩款漸變色網站：

https://webgradients.com/

https://uigradients.com/#EveningNight

將復制的css代碼放入css文件中即可。

（注：復制的css代碼需要放在#web_bg{}中）

背景不生效

1.確保你能成功引入這個css

2.請嘗試關閉js動態背景后再次嘗試

3.將butterfly.yml的background改為"#efefef"

4.確保你寫的內容正確且符合css的語法規則

個人博客為：
MoYu's Github Blog
MoYu's Gitee Blog