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

2017-08-30 08:31:19 +08:00
 metaquant

给 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

22303 次点击
所在节点    分享创造
30 条回复
westworld
2017-08-30 08:43:02 +08:00
MARK, 之后试试,感谢分享
Tyler1989
2017-08-30 08:44:01 +08:00
点进去还是白色白色背景图啊
xvx
2017-08-30 08:45:22 +08:00
然而点进去并没有背景图……
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
建议试试内容区域背景色改成 0.9-0.95 左右透明的白色,配合背景高斯模糊效果也很好,还能减小体积加快加载
sunber
2017-08-30 09:37:18 +08:00
机智的晒博客,开个玩笑
panda1001
2017-08-30 09:54:25 +08:00
我用尤大咖主页的彩条作为 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 , 这样读者的评论意愿会大大降低啊。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/386763

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX