Hexo之更换背景及透明度
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://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
Hexo之更换背景及透明度的更多相关文章
- Butterfly美化
Butterfly美化 首先提示,本文量特别大哦!基本上有所有的美化,还在持续更新ing,谨慎入坑......... 主题配置文件修改 基础配置 最最最开始的,好不容易搭建了自己的个人博客,当然要写上 ...
- 创建自己的网站博客--Hexo
原文地址:https://www.xingkongbj.com/blog/hexo/creat-hexo.html 安装环境 安装 node 下载对应版本并安装 node . 安装 Git Windo ...
- Githun&HEXO建站小记
title: 建站小记 date: 2018-03-04 11:10:54 updated: 2018-03-06 12:00:00 tags: [hexo,next,建站,学习,前端技术,折腾,博客 ...
- hexo + next搭建博客
使用hexo和next主题搭建GitHub博客 安装node.js 在node.js 官网下载, 相应系统位数的软件包. 可以选择LTS长期支持版, 或者Current当前版本. 我这里选择的是Win ...
- 2019基于Hexo快速搭建个人博客,打造一个炫酷博客(1)-奥怪的小栈
本文转载于:奥怪的小栈 这篇文章告诉你如何在2019快速上手搭建一个像我一样的博客:基于HEXO+Github搭建.并完成SEO优化,打造一个炫酷博客. 本站基于HEXO+Github搭建.所以你需要 ...
- [4]Hexo静态博客背景及界面显示优化配置
示例预览:我的主页 前提预设: [3]hexo+github搭建个人博客的主题配置 [2]hexo+github搭建个人博客的简单使用 [1]hexo+github搭建个人博客的过程记录 背景图片添加 ...
- 如何从零搭建hexo个人博客网站
https://www.jianshu.com/p/adf65cbad393?utm_source=oschina-app 准备工作 github账号 node.js 环境搭建 git使用 mar ...
- hexo搭建博客系列(三)美化主题
文章目录 其他搭建 1. 添加博客图标 2. 鼠标点击特效(二选一) 2.1 红心特效 2.2 爆炸烟花 3. 设置头像 4. 侧边栏社交小图标设置 5. 文章末尾的标签图标修改 6. 访问量统计 7 ...
- 【原】Github+Hexo+NextT搭建个人博客
摘要 GitHub 是一个开源项目的托管网站,相信很多人都听过.在上面有很多高质量的项目代码,我们也可以把自己的项目代码托管到GitHub,与朋友们共享交流.GitHub Pages 是Github为 ...
随机推荐
- idea 启动热部署Devtolls
1.在子工程pom.xml中添加devtools jar包到需要启动的项目中 1 <dependency> 2 <groupId>org.springframework.boo ...
- 【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 ...
- CSS奇思妙想 -- 使用 CSS 创造艺术
本文属于 CSS 绘图技巧其中一篇.之前有过一篇:在 CSS 中使用三角函数绘制曲线图形及展示动画 想写一篇关于 CSS 创造艺术的文章已久,本文主要介绍如何借助 CSS-doodle ,利用 CSS ...
- 转 8 jmeter之集合点
8 jmeter之集合点 集合点:集合点用以同步虚拟用户,以便恰好在同一时刻执行任务.在测试计划中,可能会要求系统能够承受1000 人同时提交数据,在LoadRunner 中可以通过在提交数据操作 ...
- spring data JPA 使用EntityentiListeners实现数据审计功能设计
当系统中有审计需求时,特别是需要对某些数据进行动态监控时,我们可以使用EntityentiListeners来实现,当然这是基于使用JPA而不是mybatis的情况下. 当前我们的需求场景: 1.需要 ...
- 分布式事务 Seata Saga 模式首秀以及三种模式详解 | Meetup#3 回顾
https://mp.weixin.qq.com/s/67NvEVljnU-0-6rb7MWpGw 分布式事务 Seata Saga 模式首秀以及三种模式详解 | Meetup#3 回顾 原创 蚂蚁金 ...
- 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 ...
- 微服务中台落地 中台误区 当中台遇上DDD,我们该如何设计微服务
小结: 1. 微服务中台不是 /1堆砌技术组件就是中台 /2拥有服务治理就是中台 /3增加部分业务功能就是中台 /4Cloud Native 就是中台 https://mp.weixin.qq.com ...
- 一个实体对象不能由多个 IEntityChangeTracker 实例引用
因为需求需要EF 实现批量的删除后插入,所以出现了这个报错, 这个报错的原因是,EF查询是有带跟踪的,跟踪后其他上下文想操作这个实体就会报错. 所以,查询使用 ef AsNoTracking 查后无追 ...
- 「笔记」数位DP
目录 写在前面 引入 求解 特判优化 代码 例题 「ZJOI2010」数字计数 「AHOI2009」同类分布 套路题们 「SDOI2014」数数 写在最后 写在前面 19 年前听 zlq 讲课的时候学 ...