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. 利用iptables防火墙保护web服务器

    实例:利用iptables防火墙保护web服务器 防火墙--->路由器-->交换机-->pc机 配置之前,清空下已有的规则,放在规则冲突不生效 工作中,先放行端口写完规则,再DROP ...

  2. C# ADO.NET连接字符串详解

    C#中连接字符串包含以下内容 参数 说明 Provider 设置或者返回提供的连接程式的名称,仅用于OLeDbConnection对象 Connection Timeout 在终止尝试并产生异常前,等 ...

  3. Docker-常用基建的安装与部署

    一:Docker安装 1:通过yum安装docker yum -y install gcc yum -y install gcc-c++ yum remove docker \ docker-clie ...

  4. 1.5V升3.3V芯片电路图,稳压3.3V供电MCU模块等

    干电池1.5V可以升到3.3V,通过PW5100干电池升压IC,于外围3个元件:2个电容和一个电感即可组成1.5V升3.3V的电路系统. 干电池属于低能量的电池产品,不过一般使用到干电池的产品也是输出 ...

  5. 浅析鸿蒙中的 Gn 与 Ninja(一)

    目录: Ninja简介 make 的 3 个特性 举例说明Ninja 的用法 如何向构建工具 Ninja 描述构建图 后记 鸿蒙系统的编译构建是基于 Gn 和 Ninja 完成的,那么 Gn 和 Ni ...

  6. Linux下双网卡双ip-双外网网关-电信联通双线主机设置

    1.实现:通过运营商提供的智能DNS,把电信用户访问时,数据进电信的网卡,出来时也从电信的网关出来,访问联通时,从联通网卡时,联通网卡出.这样速度就会快,实现双线主机的功能. 2.网卡信息:电信IP( ...

  7. RabbitMq消费者在初始配置之后进行数据消费

    RabbitMq消费者在初始配置之后进行数据消费 问题背景 在写一个消费rabbitmq消息的程序是,发现了一个问题,消费者的业务逻辑里面依赖这一些配置信息,但是当项目启动时,如果队列里面有积压数据的 ...

  8. 删除HDFS中指定的文件。

    1 import java.text.SimpleDateFormat; 2 import java.util.Scanner; 3 4 import org.apache.hadoop.fs.Fil ...

  9. Quartz.Net 组件的封装使用Quartz.AspNetCore

    Quartz.Net 组件的封装使用 Quartz.Net是面向.NET的一款功能齐全的开源作业调度组件,你可以把它嵌入你的系统中实现作业调度,也可以基于Quartz.Net开发一套完整的作业调度系统 ...

  10. Scala-文件操作

    Scala-文件操作 一.遍历一个文件中的每一行 方法一: 使用Source.getLines返回的迭代器 方法二: 将Source.getLines返回的迭代器,转换成数组 方法三: 调用Sourc ...