示例预览:我的主页

背景图片添加

  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. Android培训准备资料之UI一些相似控件和控件一些相似属性之间的区别

    这一篇博客主要收集五大布局中的一些相似控件和控件一些相似属性之间的区别 ImageView ImageButton Button 三者有啥区别? (1)Button继承自TextView,ImageV ...

  2. fetch的常见问题及其解决办法

    摘要: 玩转fetch. 作者:wonyun 原文:fetch使用的常见问题及其解决办法 Fundebug经授权转载,版权归原作者所有. 首先声明一下,本文不是要讲解fetch的具体用法,不清楚的可以 ...

  3. k8s service对象(三)

    概述 service服务也是Kubernetes里核心字眼对象之一,Kubernetes里的每一个service其实就是我们经常提起的微服务架构中的一个微服务,之前讲解Pod,RC等资源对象其实都是为 ...

  4. 002-Zabbix 前端配置

    Zabbix 前端配置 [基于此文章的环境]点我快速打开文章 [官方地址]点我快速打开文章 第 1 步 在浏览器中,打开 Zabbix URL:http:// <server_ip_or_nam ...

  5. 006-OpenStack-配仪表盘

    OpenStack-配仪表盘 [基于此文章的环境]点我快速打开文章 计算节点安装(compute1) 1.安装 yum install openstack-dashboard -y &> ...

  6. (八)OpenStack---M版---双节点搭建---Cinder安装和配置

    ↓↓↓↓↓↓↓↓视频已上线B站↓↓↓↓↓↓↓↓ >>>>>>传送门 1.创建数据库并授权 2.获得admin凭证执行管理员命令并创建服务证书 3.创建块存储设备AP ...

  7. Windows | Ubuntu 18.04安装Visual Studio Code

    Visual  Studio Code是一款很好的开源跨平台代码编辑器,这里使用 tarball 格式文件来安装(免安装), 首先下载 .tar.gz 文件包,点击下载, 可自行在官网下载 将文件包解 ...

  8. web-程序逻辑问题

    题目 查看源码 http://ctf5.shiyanbar.com/web/5/index.txt 代码如下 <html> <head> welcome to simplexu ...

  9. oracle查看被锁的表及解除锁

    -- 查看被锁对象 select object_name,machine,s.sid,s.serial# from v$locked_object l,dba_objects o ,v$session ...

  10. vscode使用插件来添加文件说明和函数说明——42header——psioniq File Header——koroFileHeader

    安装号以后,设置快捷键如下: 同时需要根据自己的需要的修改json文件 // 文件头部注释 "fileheader.customMade": { "Description ...