示例预览:我的主页

背景图片添加

  1. 自动切换背景

  2. 静态本地背景

    首先将已选定的背景图片放到博客根目录下的\source\images下

    ​ 示例:D:\Blog\source\images\background.jpg

    其次,打开配置文件:D:\Blog\themes\next\source\css\_custom\custom.styl

    // Custom styles.
    body {
    background-image: url(/images/background.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    }

界面显示优化

在上面打开的配置文件body{}中继续添加以下配置;(D:\Blog\themes\next\source\css\_custom\custom.styl)

  ```stylus

// Custom styles.

body {

background-image: url(/images/background.jpg);

background-attachment: fixed;

background-repeat: no-repeat;

background-size: cover;

//改变背景色和透明度等
.main-inner {
background: #fff;
padding: 25px;
opacity: 0.75;
border-radius: 10px;
} //修改头部导航栏显示宽度,透明度,位置等
#header {
padding: 5px 25px;
margin: 0 auto;
margin-top:15px;
width: 700px;
opacity: 0.8;
border-radius: 10px; } //修改底部展示信息显示宽度,透明度,位置等
#footer {
padding: 5px 25px;
position: relative;
margin: 0 auto;
margin-bottom: 5px;
width: 700px;
opacity: 0.8;
border-radius: 10px;
}

}

```

此时,修改完上面的配置可能会发现首页博客主体部分的下方与底部展示信息的间隙过大,我们加入以下配置进行调整,需要注意的是,此时添加的配置与上方添加位置不同,需要在body{}下方添加;

body .main {
margin-bottom: 45px;
}

完整配置如下:

// Custom styles.
body {
background-image: url(/images/background.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover; //改变背景色和透明度
.main-inner {
background: #fff;
padding: 25px;
opacity: 0.75;
border-radius: 10px;
} #header {
padding: 5px 25px;
margin: 0 auto;
margin-top:15px;
width: 700px;
opacity: 0.8;
border-radius: 10px; } #footer {
padding: 5px 25px;
position: relative;
margin: 0 auto;
margin-bottom: 5px;
width: 700px;
opacity: 0.8;
border-radius: 10px;
}
} body .main {
margin-bottom: 45px;
}

五、Hexo静态博客背景及界面显示优化配置的更多相关文章

  1. [4]Hexo静态博客背景及界面显示优化配置

    示例预览:我的主页 前提预设: [3]hexo+github搭建个人博客的主题配置 [2]hexo+github搭建个人博客的简单使用 [1]hexo+github搭建个人博客的过程记录 背景图片添加 ...

  2. [5]Hexo静态博客绑定域名及域名解析

    示例: http://zsy.xyz/ 前提预设:[4]Hexo静态博客背景及界面显示优化配置 [3]hexo+github搭建个人博客的主题配置 [2]hexo+github搭建个人博客的简单使用 ...

  3. 开发小白也毫无压力的hexo静态博客建站全攻略 - 躺坑后亲诉心路历程

    目录 基本原理 方法1 - 本机Windows下建站 (力荐) 下载安装node.js 用管理员权限打开命令行,安装hexo-cli和hexo 下载安装git 初始化hexo 使用hexo gener ...

  4. 在hexo静态博客中利用d3-cloud来展现标签云

    效果: http://lucyhao.com/tags/ hexo自带的tag cloud的标签展现不太美观,想能够展现出“云”效果的标签.在网上找到了d3-cloud这个项目,github地址:ht ...

  5. 在windows下创建基于github的hexo静态博客

    最近边上的人都突然买起了域名搭起了个人网站,渣渣的我介于期末没事干也跟风搭了个静态博客.虽说博客基本不更新T T,嘛嘛回归正题. 首先准备工作: 1)安装nodejs 2)安装msysgit(虽然现在 ...

  6. 搭建hexo静态博客

    使用hexo搭建博客,并将博客部署到github 需要的工具 Node.js Git 一个Github账号 正式开始 在任意目录下新建一个文件夹,如blog,在该文件夹下右键打开git bash he ...

  7. Hexo静态博客搭建教程

    Hexo是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页.生成静态网页可以托管在github.下面简单介绍一下he ...

  8. Hexo 静态博客指南:建站教程(上)

    本文最初发布于我的个人博客Bambrow's Blog,采用 BY-NC-SA 许可协议,转载请注明出处.若有后续更新,将更新于原博客.欢迎去我的博客阅读更多文章! 本文详细记录一下站点建立过程,以便 ...

  9. 复活hexo静态博客的方法

    我的个人博客http://webhmy.com/是通过hexo搭建的,它支持图片显示,支持md,无需主机空间,可以满足我的大部分需求.但是在2年的使用的过程中遇到一些问题,这里记录下来.便于下次快速复 ...

随机推荐

  1. 【新手篇】搭建DCN漏洞靶机及简单的SQL手工注入

    很多新手小白入门后发现想要学好“网安”技术,除了掌握基础理论知识,更需要经常模拟不同的漏洞环境,但是如果使用外网服务器练习,会存在一定风险,因此能够搭建一个本地的模拟环境去测试漏洞将是一个不错的方案. ...

  2. getopt、getopt_long命令参数

    参数 optstring为选项字符串.如果选项字符串里的字母后接着冒号":",则表示还有相关的参数 getopt int getopt(int argc, char * const ...

  3. 如何在Ubuntu编译ice

    摘要:所有操作都在root用户下执行 第一步:下载ice最新版本,以3.7版本为例 第二步:安装ICE依赖包里面的三方库 #apt-get install libmcpp-dev;apt-get in ...

  4. 8种常见数据结构及其Javascript实现

    摘要: 面试常问的知识点啊... 原文:常见数据结构和Javascript实现总结 作者:MudOnTire Fundebug经授权转载,版权归原作者所有. 做前端的同学不少都是自学成才或者半路出家, ...

  5. Spring Cloud Netflix之Euraka Server注册中心

    Spring Cloud简介 Spring Cloud是基于Spring Boot的一套实现微服务架构的生态组件.生态组件中包含Spring Cloud NetFlix,Spring Cloud Fe ...

  6. centos7 ntp server & samba

    最近公司内部一个需求:必须 Linux建个 ntp server ,并且 Windows可以net time \\ip 访问. 想要解决问题,还得解决前置问题. 服务器不能上网,无法直接访问外部 yu ...

  7. nth-child,nth-of-type

    首先,这两个选择器是用来干什么的? 举例子 p:nth-child(1);这个选择器选择的是p所有父辈元素中第一个子元素,且这个子元素为p,此时就生效. p:nth-of-type(1);这个选择器选 ...

  8. 201871010105-曹玉中《面向对象程序设计(java)》第十四周学习总结

    201871010105-曹玉中<面向对象程序设计(java)>第十四周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ ...

  9. python中判断两个对象是否相等

    #coding=utf-8#比较两个对象是否相等#python 2中使用cmp(),==,is#is 主要是判断 2 个变量是否引用的是同一个对象,如果是的话,则返回 true,否则返回 false. ...

  10. Netty之ChannelHandler(三)

    ChannelHandler是netty中的核心处理部分,我们使用netty的绝大部分代码都写在这部分,所以了解它的一些机制和特性是很有必要的. 一.Channel Channel接口抽象了底层soc ...