Hexo之静态+动态背景设置
来源:互联网 发布:网络ip与本地ip 编辑:程序博客网 时间:2024/05/21 10:39
写在前面
实现背景图更换及平铺,以及引入动态背景(可交互)
静态background设置
- 打开
博客根目录/themes/next/source/css/_custom/custom.styl
文件,编辑如下:
// Custom styles.body { background-image: url(/images/background.png); background-attachment: fixed; // 不随屏幕滚动而滚动 background-repeat: repeat; // 如果背景图不够屏幕大小则重复铺,改为no-repeat则表示不重复铺 background-size: contain; // 等比例铺满屏幕}
- 将背景图命名为background.png并放入
主题根目录/images
下
动态可交互背景(js引入)
- 打开
博客根目录/themes/next/layout/_layout.swig
文件,在之前添加代码如下:
{% if theme.canvas_nest %}<script type="text/javascript"color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>{% endif %}
属性说明:
- color :线条颜色, 默认: ‘0,0,0’;三个数字分别为(R,G,B)
- opacity: 线条透明度(0~1), 默认: 0.5
- count: 线条的总数量, 默认: 150
- zIndex: 背景的z-index属性,css属性用于控制所在层的位置, 默认: -1
2.打开博客根目录/themes/next/_config.yml
,找到字段canvas_nest,将其置为true【如果没有找到该字段,请自行添加】
3.hexo clean , hexo d -g可以看到效果~
阅读全文
0 0
- Hexo之静态+动态背景设置
- hexo博客的背景设置
- hexo+next主题优化之加入网易云音乐、网易云跟帖、炫酷动态背景
- 设置静态文本框背景透明
- 动态设置控件背景,透明度
- VC 设置静态文本框透明背景
- 设置静态文本框的背景为透明
- 【MFC设置静态文本框背景为透明】
- VC++ MFC 中动态更改透明背景的静态文本时重叠现象(尤其是界面设置了背景图片时)
- 批处理设置静态、动态ip
- Hexo搭建静态博客
- PDF背景编辑之设置背景颜色以及改变背景
- Qt之设置窗口背景
- Qt之设置窗口背景
- Qt之设置窗口背景
- Qt之设置窗口背景
- Qt之设置窗口背景
- HighCharts之图表背景设置
- 习题7.3
- spring拦截器
- 文件中例如1饭钱1000 2房租2000 这样的数据怎么把后面的花费相加输出?
- Objective-C中为何用copy修饰block
- Hexo之使用CodingPages实现全站Https
- Hexo之静态+动态背景设置
- 关于mysql忘记root密码解决
- 安装android studio出现unable to access android sdk add-on list解决方法
- leetcode练习 714. Best Time to Buy and Sell Stock with Transaction Fee
- 关于Http相关具体内容
- 11.1题解
- 如何使用友盟统计(自定义事件)
- Android studio修改IDE背景颜色
- RDKit:计算不同分子或构象之间的RMSD