其实我们是可以自定义css的，例如我把文章详情页上面文章名称后面的背景变透明，也是可以办到的。
如图所示：
步骤如下：
首先说明：下面的source文件夹和主题themes文件夹同级，也就是最外面(根目录下)的那个source文件夹，不是主题里的，这样就不会动源码
- 首先我们在
source文件夹下创建custom/index.css, 内容如下:1
2
3
4
5
6
7
8
9
10
11
12
| .post-detail-header {
background-image: none!important;
background-color: transparent!important;
}
.post-detail-header-mask {
background: transparent!important;
}
#appBgSwiper {
filter: brightness(0.8);
background: rgba(0, 0, 0, .3)!important;
}
|
!important就是权重值更高的意思。
2.引入我们创建好的css
打开主题配置文件_config.yml, 找到import, 引入css
1
2
3
4
5
6
7
8
9
|
import:
link:
- <link href="/custom/index.css" rel="stylesheet">
-
script:
-
-
|
背景图片则使用参数bgImg指定, 例如:
1
2
3
4
5
6
7
8
9
| ---
title: 自定义css之头部图片透明
date: 2022-06-09 18:56:20
tags: ['自定义css']
categories: [自定义css]
swiper: true
img: https://pic1.zhimg.com/80/v2-6d0cbd4380b4959542d3f5da31c7f20c_1440w.jpg
bgImg: https://pic1.zhimg.com/80/v2-6d0cbd4380b4959542d3f5da31c7f20c_1440w.jpg
---
|
bgImg还可以是数组哦，数组的话额背景图片轮播显示, 例如:
1
2
3
4
5
| bgImg: [
'https://pica.zhimg.com/80/v2-292e6340491bd97f9d014d6be3371c04_1440w.jpg',
'https://pica.zhimg.com/80/v2-9659f2305acb80f25ced33aa980092c1_1440w.jpg',
'https://api.btstu.cn/sjbz/api.php',
]
|
bgImg不仅可以在文章里面单独配，还可以在主题配置文件里面全局指定。
1
| bgImgTransition: 'fade' # fade, scale, translate-fade,
|
bgImgTransition表示背景图片切换特效, 可以在单独文章页面使用，也可以在主题配置文件里面全局指定。
然后就ok啦,大功告成
这个效果还可以和添加动态背景效果一起使用哦
