Hexo之更换背景及透明度

引入方式

首先,介绍一下引入方式,外部导入css文件,不影响内部配置。

1.创建css文件

创建一个css文件移动到\themes\butterfly\source\css目录下。

2.引入

inject\source\_databutterfly.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.ymlbackground改为"#efefef"

4.确保你写的内容正确符合css的语法规则

个人博客为:

MoYu's Github Blog

MoYu's Gitee Blog

Hexo之更换背景及透明度的更多相关文章

  1. Butterfly美化

    Butterfly美化 首先提示,本文量特别大哦!基本上有所有的美化,还在持续更新ing,谨慎入坑......... 主题配置文件修改 基础配置 最最最开始的,好不容易搭建了自己的个人博客,当然要写上 ...

  2. 创建自己的网站博客--Hexo

    原文地址:https://www.xingkongbj.com/blog/hexo/creat-hexo.html 安装环境 安装 node 下载对应版本并安装 node . 安装 Git Windo ...

  3. Githun&HEXO建站小记

    title: 建站小记 date: 2018-03-04 11:10:54 updated: 2018-03-06 12:00:00 tags: [hexo,next,建站,学习,前端技术,折腾,博客 ...

  4. hexo + next搭建博客

    使用hexo和next主题搭建GitHub博客 安装node.js 在node.js 官网下载, 相应系统位数的软件包. 可以选择LTS长期支持版, 或者Current当前版本. 我这里选择的是Win ...

  5. 2019基于Hexo快速搭建个人博客,打造一个炫酷博客(1)-奥怪的小栈

    本文转载于:奥怪的小栈 这篇文章告诉你如何在2019快速上手搭建一个像我一样的博客:基于HEXO+Github搭建.并完成SEO优化,打造一个炫酷博客. 本站基于HEXO+Github搭建.所以你需要 ...

  6. [4]Hexo静态博客背景及界面显示优化配置

    示例预览:我的主页 前提预设: [3]hexo+github搭建个人博客的主题配置 [2]hexo+github搭建个人博客的简单使用 [1]hexo+github搭建个人博客的过程记录 背景图片添加 ...

  7. 如何从零搭建hexo个人博客网站

    https://www.jianshu.com/p/adf65cbad393?utm_source=oschina-app   准备工作 github账号 node.js 环境搭建 git使用 mar ...

  8. hexo搭建博客系列(三)美化主题

    文章目录 其他搭建 1. 添加博客图标 2. 鼠标点击特效(二选一) 2.1 红心特效 2.2 爆炸烟花 3. 设置头像 4. 侧边栏社交小图标设置 5. 文章末尾的标签图标修改 6. 访问量统计 7 ...

  9. 【原】Github+Hexo+NextT搭建个人博客

    摘要 GitHub 是一个开源项目的托管网站,相信很多人都听过.在上面有很多高质量的项目代码,我们也可以把自己的项目代码托管到GitHub,与朋友们共享交流.GitHub Pages 是Github为 ...

随机推荐

  1. idea 启动热部署Devtolls

    1.在子工程pom.xml中添加devtools jar包到需要启动的项目中 1 <dependency> 2 <groupId>org.springframework.boo ...

  2. 【Android】报错 Please ensure Hyper-V is disabled in Windows Features, or refer to the Intel HAXM 的解决方案

    参考文章 实测华为锐龙本(adm yes)安装Android avd虚拟机教程 环境 Android Studio 3.6; Windows 1909; AMD Ryzen 4800U with Ra ...

  3. CSS奇思妙想 -- 使用 CSS 创造艺术

    本文属于 CSS 绘图技巧其中一篇.之前有过一篇:在 CSS 中使用三角函数绘制曲线图形及展示动画 想写一篇关于 CSS 创造艺术的文章已久,本文主要介绍如何借助 CSS-doodle ,利用 CSS ...

  4. 转 8 jmeter之集合点

    8 jmeter之集合点   集合点:集合点用以同步虚拟用户,以便恰好在同一时刻执行任务.在测试计划中,可能会要求系统能够承受1000 人同时提交数据,在LoadRunner 中可以通过在提交数据操作 ...

  5. spring data JPA 使用EntityentiListeners实现数据审计功能设计

    当系统中有审计需求时,特别是需要对某些数据进行动态监控时,我们可以使用EntityentiListeners来实现,当然这是基于使用JPA而不是mybatis的情况下. 当前我们的需求场景: 1.需要 ...

  6. 分布式事务 Seata Saga 模式首秀以及三种模式详解 | Meetup#3 回顾

    https://mp.weixin.qq.com/s/67NvEVljnU-0-6rb7MWpGw 分布式事务 Seata Saga 模式首秀以及三种模式详解 | Meetup#3 回顾 原创 蚂蚁金 ...

  7. detect data races The cost of race detection varies by program, but for a typical program, memory usage may increase by 5-10x and execution time by 2-20x.

    小结: 1. conflicting access 2.性能危害 优化 The cost of race detection varies by program, but for a typical ...

  8. 微服务中台落地 中台误区 当中台遇上DDD,我们该如何设计微服务

    小结: 1. 微服务中台不是 /1堆砌技术组件就是中台 /2拥有服务治理就是中台 /3增加部分业务功能就是中台 /4Cloud Native 就是中台 https://mp.weixin.qq.com ...

  9. 一个实体对象不能由多个 IEntityChangeTracker 实例引用

    因为需求需要EF 实现批量的删除后插入,所以出现了这个报错, 这个报错的原因是,EF查询是有带跟踪的,跟踪后其他上下文想操作这个实体就会报错. 所以,查询使用 ef AsNoTracking 查后无追 ...

  10. 「笔记」数位DP

    目录 写在前面 引入 求解 特判优化 代码 例题 「ZJOI2010」数字计数 「AHOI2009」同类分布 套路题们 「SDOI2014」数数 写在最后 写在前面 19 年前听 zlq 讲课的时候学 ...