[导航]淘宝店铺&天猫店铺背景固定的方法

固定背景,就是页面往下滚动浏览的时候,背景是固定不动的,实现类似浮动固定的效果。这里介绍4种方法,建议使用第二种和第四种方法。

fixbg

No.1 第一种CSS代码

  1. 制作一张1920宽的图片,高度建议达到1200或更高。然后主意下图效果:(如果图片两侧有需要显示的内容,中间需要空出集市 950(天猫990) 的宽度)。
    fixbg01
  2. 将制作好的固定背景图片上传到淘宝图片空间。然后到装修店铺首页 –> 编辑系统导航模块 –> 点击显示设置 –> 输入下面一段代码:
    1
    2
    3
    
    body{
    background:url(http://img03.taobaocdn.com/imgextra/i3/373282813/TB2qt0NbFXXXXXqXpXXXXXXXXXX_!!373282813.jpg) no-repeat fixed center top transparent;
    }

    navcss

    主意:上图划红线的图片地址改成自己的图片地址即可。如果背景要居于底部居中显示,那么把代码中的 top 改成 bottom 。

  3. 然后到后台设置页面背景,背景色不要打勾,页面背景图要删除然后保存下就可以了。

    主意:页面背景一定要去掉(页面背景那里设置?点击这里)。

No.2 第二种同第一种CSS代码

  1. 第一步同第一种方法的第一步骤。
  2. 图片上传到图空间,拷贝图片地址。然后到 http://www.reevi.com/navcss 导航编辑器,图片粘贴到固定背景上,点击“导出背景代码”按钮。
    固定背景导出按钮
  3. 然后进入装修首页,编辑系统的导航模块,把代码粘贴到显示设置里面即可。
  4. 这步骤参考第一种方法的第三步骤。

No.3 第三种装修助手中的固定背景功能

  1. 第一步同第一种方法的第一步骤。
  2. 图片上传到图片空间,拷贝图片地址。然后进入 http://www.reevi.com/neweditor 然后点击“固定背景”,在左上角的属性面板粘贴图片地址进去。
    装修助手固定背景
    装修助手固定背景01
  3. 点击右上角的导出,在弹出窗口拷贝代码。
    装修助手固定背景02
  4. 装修首页,添加自定义内容区在页面的第一个位置(因为固定背景图片的代码不占用高度,所以要在页面最顶部添加自定义内容区模块,方便可以切换到布局管理下删除该模块。)。把代码粘贴到源码内,保存即可。
    装修助手固定背景03
    装修助手固定背景04

    主意:如果放代码的模块不是添加在页面第一个,也要记得是添加在页面的第几个模块,方便切换到布局管理下可以删除到该模块。

No.4 第四种模板全屏海报模块上设置

  1. 第一步同第一种方法的第一步骤。
  2. 大部分的模板,在“全屏海报模块”上都会提供固定背景图片的设置功能,只要把图片粘贴到相应位置即可。
    全屏海报固定背景图片
  3. 如果该模板没有提供这个功能的,就使用上面三种方法设置。
请尊重我们的辛苦付出,未经允许,请不要转载 <a href="http://www.reevi.com" target="_blank">锐视觉</a> 的文章!