Butterfly实现背景全局平铺

  • 关于Butterfly背景平铺网上很多教程不一，对于不会代码的朋友很是苦恼，其实很简单，只需修改几个代码即可，下面教大家来做全局背景平铺！

背景全局平铺新办法

  • Banner 头图设置改为透明颜色 传送门

旧办法

最复杂方法一：修改电脑端

  • 进入删除 themes\Butterfly\source\css_layout\head.styl，
    1
    2
    3
    // page
    &.not-index-bg
      height: 20rem
  • 调整高度 themes\Butterfly\source\css_layout\page.styl，找到 layout_page 修改成如下
    1
    2
    3
    4
    5
    6
    layout_page
      display: flex
      align-items: flex-start
      margin: 0 auto
      padding: 15rem 15px
      max-width: 1200px

修改手机端

  • 进入删除 themes\Butterfly\source\css_layout\head.styl，

    1
    2
    &.not-index-bg
      height: 14rem

  • 调整高度 themes\Butterfly\source\css_layout\page.styl，找到 media screen and 修改成如下

    1
    2
    3
    @media screen and (max-width: $sm)
      .layout_page
        padding: 10rem 10px !important

    这样就完成了，无论电脑与手机端都会实现全局背景平铺

方法二：

  • 最简单方法直接修改数值，如下图
  • 注意！注意！注意！注意！注意！注意！，方法二会导致手机首页主图自动放大，无法做到同步。