美文网首页关于hexo让前端飞Hexo
Next主题个性化之自动更换背景图片

Next主题个性化之自动更换背景图片

作者: 芒果浩明 | 来源:发表于2017-11-07 19:22 被阅读223次

    欢迎移步到这里浏览

    如果觉得next的空白主题看腻了或者太多人用觉得不够个性化,那么不妨试试自动更新背景图片。

    实现的原理

    图片来源

    自动更换背景的实现是修改添加背景的css样式实现。图片来源是

    https://source.unsplash.com/
    

    这个网站,里面不仅免费提供了很多高清美图,而且还提供api接口调用,实在是良心。这里实现的原理也是调用了这个网站的接口。

    修改背景样式

    修改themes\next\source\css\ _custom\custom.styl文件,这个是Next故意留给用户自己个性化定制一些样式的文件,添加以下代码:

    body {
        background:url(https://source.unsplash.com/random/1600x900);
        background-repeat: no-repeat;
        background-attachment:fixed;
        background-position:50% 50%;
    }
    

    如果自己不喜欢这个网址提供的图片做背景,那么修改url()里面的路径即可。repeat、attachment、position就是调整图片的位置,不重复出现、不滚动等等。

    修改不透明度

    完成这一步其实背景就会自动更换了,但是会出现一个问题,因为next主题的背景是纯透明的,这样子就造成背景图片的影响看不见文字,这对于博客来说肯定不行。

    那么就需要调整背景的不透明度了。同样是修改themes\next\source\css\ _custom\custom.styl文件。在后面添加如下代码

    .main-inner { 
        margin-top: 60px;
        padding: 60px 60px 60px 60px;
        background: #fff;
        opacity: 0.8;
        min-height: 500px;
    }
    
    • background: #fff; 白色
    • opacity: 0.8;不透明度

    效果

    完成上述设置,我们来看看效果

    next_bj_auto.png

    相关文章

      网友评论

      • loveSnowBest:问个问题 就是如果写50% 50%那么在手机显示的时候背景就会在很下面。。。怎么才能实现responsibility呢? 顺便留个爪印: https://lovesnowbest.site (逃
        loveSnowBest:@芒果浩明 谢谢~ 但是你的图片被拉伸了吧?我刚才在手机上看你的站点发现虽然动态背景是正常的不过背景图片似乎被拉伸了呢(可能被盖了一层蒙版所以不是很明显)我查了一下 好像是因为移动端对background-size: cover的支持不是很好,可以对body进行hack一下:
        ```css
        body:before {
        content: ' ';
        position: fixed;
        z-index: -1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: url() center 0 no-repeat;
        background-size: cover;
        }
        ```
        芒果浩明:我手机访问自己的背景没有显示在很下面啊,你的站点个性化漂亮:+1:
      • Winter_Chen:为什么可以使用畅言?好像这个需要ICP备案啊
        芒果浩明:把未备案的加入到已经备案的域名里的白名单就行了,不过仍然至少需要一个已经备案的域名
      • Winter_Chen:如何解决不同分辨率屏幕自动布局?屏幕大了旁边就会留白
        芒果浩明:解决的方法。修改body的样式
        添加
        background-size: cover;
        width: 100%;
        两个属性
      • 没有写的舒:试试看:+1:
        芒果浩明:@没有写的舒 可以的,若需要帮助可以咨询我
        没有写的舒:@芒果浩明 还没弄,但想试试。:smile:
        芒果浩明:@没有写的舒 语文老师想自己弄一个个人博客?😂

      本文标题:Next主题个性化之自动更换背景图片

      本文链接:https://www.haomeiwen.com/subject/lbzjmxtx.html