背景美化 | Chen's Blog

基本信息

服务器选择	Hexo+Butterfly主题	博客时间	2023.08.01
搭建结果	背景美化，修改透明度及渐变背景

添加自定义css样式文件的方法，可以参考另一篇文章：自定义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);
}

透明度为0.1

1
2
3

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

透明度为0.5

1
2
3

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

全透明为0

1
2
3

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

更换博客背景

背景div

butterfly主题的背景div的id为web_bg，因此我们只需要重新定义这个样式即可。

1	#web_bg{ }

图片背景

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

背景渐变

博客同款

本博客同款,在创建的css文件中复制以下代码:

1
2
3

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

动态渐变

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

紫蓝色渐变

1
2
3

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

图片渐变

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

1
2
3

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