给 hexo next 主题加上背景图片，感觉美观很多啊

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 2672 天前的主题，其中的信息可能已经有所发展或是发生改变。

给 hexo next 加上背景图片，只需要在 themes\next\source\css_custom\custom.styl 文件中添加几行代码：

@media screen and (min-width:1200px) {

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

    #footer a {
        color:#eee;
    }
}

感觉比之前那个纯白背景要好看很多啊，具体效果见: https://blog.metaquant.org

第 1 条附言 · 2017-08-30 09:35:11 +08:00

感谢 @grzhan 的评论，增加`background-size:cover`可能有助于大分辨率下背景图的显示，不过我手中没有大分辨率的机器，所以无法确定

Hexo

CSS

背景

30 条回复 • 2018-12-05 21:13:41 +08:00

westworld

2017-08-30 08:43:02 +08:00

MARK, 之后试试，感谢分享

Tyler1989

2017-08-30 08:44:01 +08:00 via Android

点进去还是白色白色背景图啊

xvx

2017-08-30 08:45:22 +08:00 via Android

然而点进去并没有背景图……

metaquant

2017-08-30 08:47:27 +08:00

@Tyler1989 不对吧，你刷新试试

brokenQ

2017-08-30 08:48:26 +08:00

还是丑没有我的 WP 一半好看

metaquant

2017-08-30 08:51:05 +08:00

@xvx 这就尴尬了。。。

stanjia

2017-08-30 08:54:41 +08:00

宽度小时，是白底,
宽度绝对大时，是星空背景。
背景和主体风格不匹配，尤其是最下方的[由 hexo 驱动] 那块儿

grzhan

2017-08-30 08:56:01 +08:00

`background-size: cover` 这样可能在较大分辨率显示下效果更好点吧

rumengzhenxing

2017-08-30 08:57:35 +08:00

同 7 楼
![image](

)

metaquant

2017-08-30 08:57:41 +08:00

@stanjia 明白了，原来是我设置了媒体查询的原因，主要是背景图在 ipad 与手机上的效果不好

metaquant

2017-08-30 08:58:28 +08:00

@grzhan 感谢，我试试

mcfog

2017-08-30 09:33:21 +08:00 via Android

建议试试内容区域背景色改成 0.9-0.95 左右透明的白色，配合背景高斯模糊效果也很好，还能减小体积加快加载

sunber

2017-08-30 09:37:18 +08:00

机智的晒博客，开个玩笑

panda1001

2017-08-30 09:54:25 +08:00 via Android

我用尤大咖主页的彩条作为 next 的背景

metaquant

2017-08-30 09:59:27 +08:00

@sunber 哈哈

metaquant

2017-08-30 09:59:59 +08:00

@panda1001 那个也很好看，毕竟尤大是设计出身

af463419014

2017-08-30 10:45:54 +08:00

@mcfog 这招不错,感觉上了一个档次

metaquant

2017-08-30 10:56:22 +08:00

@mcfog 抱歉，我 CSS 很弱，请问如何实现？

jasonchao

2017-08-30 11:16:55 +08:00

@metaquant background:rgba(255,255,255,0.9);

kisnows

2017-08-30 11:33:30 +08:00

是挺简单，就一行 css 的问题。
但是楼主的文章评论是需要新跳一个页面到 Github , 这样读者的评论意愿会大大降低啊。

yingos

2017-08-30 12:12:36 +08:00

https://www.ipz.me 感觉用背景不是太好看

metaquant

2017-08-30 12:18:24 +08:00

@kisnows 这个是我故意这么设计的，我想的是大部分人是不评论的，只有少数真的有什么要交流的问题的话，去 github issue 上评论也不会太麻烦，而且现在还看博客的基本上都是程序员了，而程序员基本都有 github 账号吧。

这个方案实际上借鉴了 gitment 的思路，gitment 的问题是会降低页面加载的速度，而且评论还要授权，很多人担心安全因素估计就不评论了。

metaquant

2017-08-30 14:12:49 +08:00

@jasonchao 感谢

metaquant

2017-08-30 16:05:20 +08:00

@yingos 这个看个人审美啰