Butterfly透明背景設置

更為詳細的透明背景設置，包括各個頁面及側邊欄的設置。 參考：https://www.cnblogs.com/MoYu-zc/p/14397889.html

外部引入

1、創建一個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">

修改透明度

/* 文章頁背景 */
.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);
}

注：后面的.5代表的是透明度，值越大透明度越低，值越小透明度越高。 配置好后會發現只有博客主頁上的頁面背景透明設置生效，側邊欄和其他評論、分類等頁面沒有進行設置。 1、hexo -s 開啟本地連接 2、瀏覽器中打開博客網站 3、F12打開開發者工具 4、開啟設備仿真與元素檢查 圖： 5、切到“元素”顯示，將鼠標移動到你要的改變背景的模塊，然后在元素中找到其對應元素。 圖： 6、點開“元素”中對應的塊進行查看具體元素 在建好的css文件中寫入代碼 例如：

#web_bg{
   #background-image: url("https://gitee.com/yl1010code/blogPhotoes/raw/master/img1/bg-5.jpg"), linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35));
#background: #FFEFBA; /* fallback for old browsers */
#background: -webkit-linear-gradient(to right, #FFFFFF, #FFEFBA); /* Chrome 10-25, Safari 5.1-6 */
 #background: linear-gradient(to right, #FFFFFF, #FFEFBA); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
​
​
​
background: #2BC0E4; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #EAECC6, #2BC0E4); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #EAECC6, #2BC0E4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
​
}
​
/* 主頁所有文章頁面背景 */
#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);
}
/*側邊欄頁面*/
#aside-content>.card-widget {
 background: rgba(255,255,255,.6);
}
#aside-content>.sticky_layout>.card-widget{
 background: rgba(255,255,255,.6);
}
/*文章頁面*/
.layout>#post{
 background: rgba(255,255,255,.6);
}
/*分類頁面*/
.layout>#page{
 
 background: rgba(255,255,255,.6);
}
/*時間軸頁面*/
.layout>#archive{
 background: rgba(255,255,255,.6);
}

這里用到的是CSS3中的子選擇器，可以到W3CShool找文檔看看 官網：https://www.w3school.com.cn/css/css_selector_child.asp

漸變透明背景

顏色靜態漸變

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

配置漸變背景的網站： https://uigradients.com/#Margo

動態漸變

@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;
}

圖片漸變

#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");
}

里面的圖片鏈接是圖床里的 圖床配置教程： https://www.cnblogs.com/MoYu-zc/p/14400854.html