Top

博客背景美化


之前来逛过我博客的朋友可以明显的发现我的博客网站做了一些美化。是的,因为总觉得自从搭建了我这篇博客以来老感觉这博客主题虽然简约、清新,但还是感觉少了点什么,在逛过其他朋友的博客后才发现我的博客主要缺少的其实就是一种浏览氛围——背景图。
在我看过一些朋友博客的背景图后我发现这带给了我一种很优雅的视觉享受,比如一些灰白格子的背景图、简约线条的背景图,这些和简约网站可以说是是珠联璧合、相益得彰。

那么接下来就主要和大家讲讲网站如何实现动态/静态背景的效果

当然这里所说的网站可以指博客也可以指你的其他网站,因为这个教程主要是通过修改你网站前端的一些代码(CSS和js)来达到美化的目的,可以保证绝大程度的适用所有网站

动态背景的实现

动态背景的实现方法很简单,只需要一段JS代码就能完事。目前受欢迎的网站动态背景是蜘蛛网
代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<script type="text/javascript">
! function () {
function o(w, v, i) {
return w.getAttribute(v) || i
}

function j(i) {
return document.getElementsByTagName(i)
}

function l() {
var i = j("script"),
w = i.length,
v = i[w - 1];
return {
l: w,
z: o(v, "zIndex", -1), //设置动态图显示的层位,一般-1就行,不用改
o: o(v, "opacity", 0.5), //0.5显示的是线条的透明度,可以自行调整
c: o(v, "color", "0,0,0"), //设置线条的颜色,三个0,0,0分别代表RGB颜色数值,不知道的可以打开PS里的拾色器就可以看到RGB数值了
n: o(v, "count", 120), //设置线条显示的数量,有密集恐惧症的朋友可别把数值设置太大哦
}
}

function k() {
r = u.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, n = u.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}

function b() {
e.clearRect(0, 0, r, n);
var w = [f].concat(t);
var x, v, A, B, z, y;
t.forEach(function (i) {
i.x += i.xa, i.y += i.ya, i.xa *= i.x > r || i.x < 0 ? -1 : 1, i.ya *= i.y > n || i.y < 0 ? -1 : 1, e.fillRect(i.x - 0.5, i.y - 0.5, 1, 1);
for (v = 0; v < w.length; v++) {
x = w[v];
if (i !== x && null !== x.x && null !== x.y) {
B = i.x - x.x, z = i.y - x.y, y = B * B + z * z;
y < x.max && (x === f && y >= x.max / 2 && (i.x -= 0.03 * B, i.y -= 0.03 * z), A = (x.max - y) / x.max, e.beginPath(), e.lineWidth = A / 2, e.strokeStyle = "rgba(" + s.c + "," + (A + 0.2) + ")", e.moveTo(i.x, i.y), e.lineTo(x.x, x.y), e.stroke())
}
}
w.splice(w.indexOf(i), 1)
}), m(b)
}
var u = document.createElement("canvas"),
s = l(),
c = "c_n" + s.l,
e = u.getContext("2d"),
r, n, m = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (i) {
window.setTimeout(i, 1000 / 45)
},
a = Math.random,
f = {
x: null,
y: null,
max: 20000
};
u.id = c;
u.style.cssText = "position:fixed;top:0;left:0;z-index:" + s.z + ";opacity:" + s.o;
j("body")[0].appendChild(u);
k(), window.onresize = k;
window.onmousemove = function (i) {
i = i || window.event, f.x = i.clientX, f.y = i.clientY
}, window.onmouseout = function () {
f.x = null, f.y = null
};
for (var t = [], p = 0; s.n > p; p++) {
var h = a() * r,
g = a() * n,
q = 2 * a() - 1,
d = 2 * a() - 1;
t.push({
x: h,
y: g,
xa: q,
ya: d,
max: 6000
})
}
setTimeout(function () {
b()
}, 100)
}();
</script>

js代码部署

把上面的代码复制好后粘贴到你网站首页的</body>的前面,注意需要粘贴在你网站页面的主体内容部分,也就是<body></body>之间中。

以hexo博客的material-x主题为例,在F:\MyBlog\themes\material-x\layout目录下,你可以看到一个名称为layout.ejs的的文件,用编辑器打开它,在body标签里面添加上面的js代码,再hexo s -g预览下效果吧!

可设置参数

注意看,上面代码从第17行开始有一些可以设置的参数如下所示:

z: o(v, "zIndex", -1),——设置动态图显示的层位,一般-1就行,不用改。
o: o(v, "opacity", 0.5), ——0.5显示的是线条的透明度,可以自行调整。
c: o(v, "color", "0,0,0"), ——设置线条的颜色,三个0,0,0分别代表RGB颜色数值,不知道的可以打开PS里的拾色器就可以看到RGB数值了。
n: o(v, "count", 120), ——设置线条显示的数量,有密集恐惧症的朋友可别把数值设置太大哦。

那么设置网站动态背景图的部分就讲完了,接下来讲如何设置网站静态背景

静态背景的实现

静态背景简单讲就是设置一个背景图片,当然设置背景图片也不是一个img就能搞定的。

获取网站背景图片素材

大家在看别人博客的那些简约线条、简约格子什么之类的背景图片是在哪里弄的,其实这里我给大家一个资源网站,Toptal,传送门:https://www.toptal.com/designers/subtlepatterns/ 这个网站里有很多大量的背景素材,非常适合博客或者其他网站作为背景图片使用,而且都是免费下载的!

进入网站后选择你喜欢的一个背景,点击就可以在这个网站上看到预览效果,如果觉得满意就点击左侧的DOWNLOAD按钮进行下载。
下载下来的是一个压缩包,里面有MAC和Windows两种不同平台格式的图片,选择相应的即可。

加工背景图

打开图片后有的人就问了,这里面怎么就是一个小图?呵呵,当然不是,这个图片只是素材,还需要动手去制作的,方法很简单:

  1. 打开PS,把这张小图拖进PS里。
  2. 选择“编辑”>“定义图案”>弹出设置名称确定即可。
  3. 新建一个1920x1080的画布。
  4. 选择菜单栏中的编辑>填充>内容中选择“图案”>自定图案中选择自己刚刚定义好的图案>点击“填充”。
  5. 点击菜单栏中的“文件”>鼠标指向“导出”>选择“快速导出为png”>选择保存位置后进行保存。
这样我们就有了一个制作好的网站背景,接着就是靠CSS代码部署了

CSS代码部署

在网站的首页的body的CSS属性设置如下:

1
2
3
4
5
6
7
/*设置网站背景图*/

width:100%;
height:100%;
background:url("图片路径或地址") no-repeat;
background-size: cover;
background-attachment:fixed;

以hexo博客的material-x主题为例,在F:\MyBlog\themes\material-x\source\less目录下,你可以看到一个名称为_base.less的文件,用编辑器打开它,滑到最底下可以看到.1_body的属性设置,这就是博客网站全局的body属性,在它下面添加上面的CSS代码,别忘了设置好背景哦,再hexo s -g预览下效果吧!



未经允许不得转载: 小吴博客 » 博客背景美化