本文首发于我的个人博客
前言：NexT 主题本身是没有背景图片的，显得有点单调，博主觉得没有背景图片显得我的博客很丑，于是就想添加一个背景图片

next版本：8.2.1

添加背景图片

把想设置的背景放入./themes/next/source/images中，命名为background.jpg。在根目录的source文件夹下新建文件夹_data与style文件source/_data/styles.styl，输入以下代码

body {background:url(/images/background.jpg);background-repeat: no-repeat;background-attachment:fixed;background-position:100% 100%;
}

background:url为图片路径，也可以直接使用链接。
background-repeat：若果背景图片不能全屏，那么是否平铺显示，充满屏幕
background-attachment：背景是否随着网页上下滚动而滚动，fixed为固定
background-position：图片展示大小这里设置 100%，100% 的意义为：如果背景图片不能全屏，那么是否通过拉伸的方式将背景强制拉伸至全屏显示。

再在主题_config.yml文件中找到对应的custom_file_path

custom_file_path:#head: source/_data/head.swig#header: source/_data/header.swig#sidebar: source/_data/sidebar.swig#postMeta: source/_data/post-meta.swig#postBodyEnd: source/_data/post-body-end.swig#footer: source/_data/footer.swig#bodyEnd: source/_data/body-end.swig#variable: source/_data/variables.styl#mixin: source/_data/mixins.styl#style: source/_data/styles.styl

再将对应的#去除就可以了

博客内容透明化

NexT 主题的博客文章均是不透明的，这样读者就不能好好欣赏背景图片了，在上文中新建的style.styl文件中可以使博客内容透明化：

//博客内容透明化
//文章内容的透明度设置
.content-wrap {opacity: 0.8;
}
.main-inner { // margin-top: 60px;// padding: 60px 60px 60px 60px;opacity: 0.8;
}
//侧边框的透明度设置
.sidebar {opacity: 0.8;
}//菜单栏的透明度设置
.header-inner {background: rgba(255,255,255,0.8);
}//搜索框（local-search）的透明度设置
.popup {opacity: 0.8;
}

更新：上述做法会导致字体透明度也被改变，很不优雅，解决方案：

删除.main-inner中的opacity选项，在上述代码后添加如下代码

.post-block {background: rgba(255,255,255,0.7) none repeat scroll !important;
}

同样，此时的侧边栏头像及站点概览等透明度也被改变了，需要将

//侧边框的透明度设置
.sidebar {opacity: 0.8;
}

改为

.sidebar-inner {background: rgba(255,255,255,0.7) none repeat scroll !important;}

（这个设置就不会改变侧边栏中头像等的透明度了，其它的欢迎自行探索）

评论区透明度

在上述代码后添加以下代码：

.comments {background: rgba(255,255,255,0.7) none repeat scroll !important;
}

添加圆角

在source/_data/variables.styl中输入以下代码，注意，$并不是多余的

// 圆角设置
$border-radius-inner     = 20px 20px 20px 20px;
$border-radius           = 20px;

然后在 NexT 的配置文件 _config.next.yml 中取消 variables.styl 的注释：

custom_file_path:variable: source/_data/variables.styl

添加阴影效果

在source/_data/style.styl文件中添加如下代码

 // 主页文章添加阴影效果
.post {margin-top: 60px;padding: 20px;margin-bottom: 60px;-webkit-box-shadow: 0 0 5px rgba(120, 128, 114, 1.5);-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

动画

动画效果

在主题_config.yml文件中搜索motion，可更改动画效果，参考配置如下

# Use Animate.css to animate everything.
# Use velocity to animate everything.
motion:enable: trueasync: falsetransition:# Transition variants:# fadeIn | fadeOut | flipXIn | flipXOut | flipYIn | flipYOut | flipBounceXIn | flipBounceXOut | flipBounceYIn | flipBounceYOut# swoopIn | swoopOut | whirlIn | whirlOut | shrinkIn | shrinkOut | expandIn | expandOut# bounceIn | bounceOut | bounceUpIn | bounceUpOut | bounceDownIn | bounceDownOut | bounceLeftIn | bounceLeftOut | bounceRightIn | bounceRightOut# slideUpIn | slideUpOut | slideDownIn | slideDownOut | slideLeftIn | slideLeftOut | slideRightIn | slideRightOut# slideUpBigIn | slideUpBigOut | slideDownBigIn | slideDownBigOut | slideLeftBigIn | slideLeftBigOut | slideRightBigIn | slideRightBigOut# perspectiveUpIn | perspectiveUpOut | perspectiveDownIn | perspectiveDownOut | perspectiveLeftIn | perspectiveLeftOut | perspectiveRightIn | perspectiveRightOutpost_block: fadeInpost_header: slideDownInpost_body: slideDownIncoll_header: slideLeftIn# Only for Pisces | Gemini.sidebar: slideDownBigOut

动画的持续速度

在主题的/source/js文件夹下可找到motion.js文件，搜索duration可更改持续时间

next主题美化——背景图片、页面透明化、阴影、圆角、动画相关推荐

IDEA设置主题和背景图片
我们使用IDEA开发的时候长期使用一种主题会感到沉重,那麽我们如何为IDEA设置我们自己想要的背景图片呢??? 一 . 设置主题 Idea主题自带的有三种:1.黑色模式 2.Intellij模式 3. ...
给hexo个人博客 next主题添加背景图片
前几天没事自己通过hexo加github搭建了一个自己的个人博客,用的是next主题,发现挺好用,捣鼓了半天终于把全部全部配置完了,但是想改给自己的博客添加一张背景图片,在网上找了很久没找到相关的资料 ...
【主题美化系列】NexT7主题添加背景图片
> 预览:看这里 NexT主题版本测试版本: – NexT.Gemini v7.7.2 其他版本: *\themes\next-7.7.2\source\css\_common\compone ...
html背景图片循环自动播放,CSS动画实现背景无缝无限循环的实现示例
1. 需求一张图片从左向右无限循环移动 2. 代码由于是应用在移动端,故使用rem单位,后面问题也发生在这. HTML CSS .dog { width: 5.4rem; \\图片宽度 heigh ...
idea 设置背景图片、护眼主题
idea 设置背景图片.护眼主题 Ctrl + Alt + S 调出idea的 Settings设置设置背景色主题同样在Settings 护眼主题加背景图片如下效果,背景图片透明度可自己调节护眼 ...
Qt部分拉伸的背景图片
目录引言代码实现引言 QSS是Qt客户端开发中非常重要的一环,也是非常容易被忽略的一环.因为网上有太多的博文直接给出了相对美观的样式,导致多数人只是将样式表拷贝使用,而没有细究其中的语法.这也是 ...
uni-app开发h5 发布后背景图片找不到路径
项目前提: 1.使用的是uni-app的UI框架uview; 2.项目有多套主题,需要根据不同主题获取不同样式及图片,所以需要根据主题获取此处背景图代码如下(banner组件下方有个背景图,menu ...
关于我所能改的常用软件的背景图片
这一期是为了防止我下次又要花费时间想之前是怎么定义的背景图片的,造成时间浪费问题第一个,Typora 因为网上教的都是purple这个主题定制背景图片的,,可以参考 [Typora]typora设置 ...
win10——microsoft同步用户主题桌面背景的本地位置、默认背景位置、双屏双背景图设置
漫游的桌面背景(把地址直接复制到文件管理系统地址栏中ENTER即可直达) 是针对用户帐户而言的,所以所有通过microsoft帐户同步过来的数据基本都在当前用户目录下,即"%userprof ...
Visual Studio 2019背景美化（背景透明化+自定义背景图片）
目录前言步骤扩展安装主题及背景设置自定义背景图片字体符号美化不足之处前言版本 visual studio 2019 系统 windows 成品效果步骤扩展安装在上方找到扩展– ...

next主题美化——背景图片、页面透明化、阴影、圆角、动画