Next主题个性化之自动更换背景图片
来源:互联网 发布:淘宝店铺音乐怎么添加 编辑:程序博客网 时间:2024/06/05 05:36
欢迎移步到这里浏览
如果觉得next的空白主题看腻了或者太多人用觉得不够个性化,那么不妨试试自动更新背景图片。
实现的原理
图片来源
自动更换背景的实现是修改添加背景的css样式实现。图片来源是
https://source.unsplash.com/
这个网站,里面不仅免费提供了很多高清美图,而且还提供api接口调用,实在是良心。这里实现的原理也是调用了这个网站的接口。
修改背景样式
修改themes\next\source\css\ _custom\custom.styl文件,这个是Next故意留给用户自己个性化定制一些样式的文件,添加以下代码:
body { background:url(https://source.unsplash.com/random/1600x900); background-repeat: no-repeat; background-attachment:fixed; background-position:50% 50%;}
如果自己不喜欢这个网址提供的图片做背景,那么修改url()里面的路径即可。repeat、attachment、position就是调整图片的位置,不重复出现、不滚动等等。
修改不透明度
完成这一步其实背景就会自动更换了,但是会出现一个问题,因为next主题的背景是纯透明的,这样子就造成背景图片的影响看不见文字,这对于博客来说肯定不行。
那么就需要调整背景的不透明度了。同样是修改themes\next\source\css\ _custom\custom.styl文件。在后面添加如下代码
.main-inner { margin-top: 60px; padding: 60px 60px 60px 60px; background: #fff; opacity: 0.8; min-height: 500px;}
- background: #fff; 白色
- opacity: 0.8;不透明度
效果
完成上述设置,我们来看看效果
阅读全文
0 0
- Next主题个性化之自动更换背景图片
- hexo之next主题个性化配置详细教程
- 对Octopress更换个性化主题
- Android studio更换主题、背景图片
- vs2013或者2015界面个性化(更换背景、主题)
- hexo的next主题个性化教程:打造炫酷网站
- java_easyui体系之更换主题
- 给hexo个人博客 next主题添加背景图片
- java微信开发之--更换背景图片
- 更换主题
- Hexo之Next主题优化(一)
- PhpStorm快捷键设置/个性化设置,如何多项目共存?如何更换主题?
- 使用GitHub Pages + Hexo 快速搭建个性化博客(三)-更换博客主题
- C# 窗体更换背景图片
- IE工具栏背景图片更换
- UITabBarController更换tabBar背景图片
- js更换背景图片
- 更换grub引导背景图片
- java中的修饰符
- lnmp一键安装环境上laravel报500错误记录
- C#中Socket 和 Tcp 连接的区别
- jq,得到 相同 calss 属性的 标签,个数,值,
- LeetCode
- Next主题个性化之自动更换背景图片
- Python(10)萌新也能看的懂——用PyMySQL处理MySQL数据库
- usb音频传输的优劣
- 递归
- ci 分页类 伪静态错误的情况,需要修改\system\libraries\Pagination.php
- name="viewport" width="device-width" 到底都是啥
- 多种方法求逆元的板子
- 字节流转化工具
- osg之基本图元(一)