Butterfly透明背景设置

更为详细的透明背景设置，包括各个页面及侧边栏的设置。

外部引入

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