适用范围：已开通/未开通旺铺css的C店

好久没有更新文章了，今天抽空更新一篇。今天发表什么呢？当然是关于淘宝店铺装修方面的知识了。如标题，今天就来介绍下详情页中如何固定背景且是全屏的。虽然有部分亲在之前就已经会了，但鄙人喜欢分享。所谓：独乐乐不如众乐乐。附效果图一张：

下面附源码

<div class="hidden" style="display:none;">--C店详情页百变全屏背景固定  2014/05/29 www.yilingsj.com/zxsc </div>
<div class="footer-more-trigger" style="left:0;width:190px;top:-800px;padding:0;border:0;">
　<div class="footer-more-trigger" style="left:-390px;width:1920px;height:10000px;padding:0;border:0;top:0;">
　　<div class="ylsj-bbqpbg" style="width:1920px;background:url(http://img03.taobaocdn.com/imgextra/i3/1758846006/T29k5SXLlaXXXXXXXX_!!1758846006.jpg) no-repeat fixed center top;height:100%;text-align:center;background-color:#f00;">请替换适合自己店铺的背景，背景色可以更换也可去掉，此处起便于观察作用！</div>
　</div>
</div>

复制以上模块内容后到自己店铺后台按照以下顺序操作。店铺装修→→默认宝贝详情页→→左侧新建一自定义内容模块→→点击源码后将复制的代码放进去→→保存--发布即可。此时大功告成，返回产品页面即可看到效果。至于如何达到“百变”的效果呢？按照以上步骤，新建多个详情页，按照不同的产品选择对应的详情即可。

下面说一些题外话，鄙站中也发表了一小部分关于淘宝店铺装修方面的内容，但时常在群里看到有些亲还是在提问一些有案例的问题，每当看到此时，鄙人的心都凉了。鄙人并没有歧视新人的意思，只是自己不加以思考的话，习惯了衣来伸手饭来张口后只会害了自己！下面仅以此文为例，用问答的形式来详细的进行剖析。
问题一：如何实现全屏？
答：无论是已开通旺铺css的店铺还是未开通旺铺css的店铺均可使用官方的footer-more-trigger”属性，此属性有什么作用鄙人就不废话了，装修过淘宝店铺的亲都懂得，无非是定位的作用而已！
问题二：为什么全屏后在不同显示屏下会偏呢？
答：全屏是全屏了，但并没有做到居中！不同情况下居中的方式不同，有时需要变通。例如此文章的居中就是不走寻常路的做法，有兴趣的亲可以按照自己的常规思路来实现看看。
问量三：这里的“left”的值为什么是“-390”呢？
答：回归第二问的结果。c店详情页主体部位是1140px；通常设置全屏时的宽度是1920px；那么旁白还剩下780px；旁白会分左右两边，对半分后便是390了。如果亲计算不出来的话，我只能哭着对亲说：“亲，你的数学老师一定中体育老师教的吗？”
答题完毕，自己加以思考即可有新的收获！

2014.09.14　16：25更新

如不会修改代码可点击应用地址：http://www.yilingsj.com/zxsc/lbtx/2014-08-09/187.html后在另类全屏下拉中选择C店详情页直接在线生成。

2015.03.31　更新

后台发现上面的代码有缺陷，除了淘宝系统屏蔽是一方面原因外，另一方面原因是因为上面的代码会遮挡住系统内容。然后艺灵又将代码进行了整理下，并修复了缺陷，解决的方法就是：分左右两侧来添加背景，这样就避免了遮挡系统推荐的内容了，效果图如下：
。

<div style="height:0px;" data-title="【详情页全屏固定背景】(2015.3.31更新)">
<div class="footer-more-trigger most-footer freeze-layer cloud-footer " style="top:-730px;border:0px;padding:0px;left:0;height:100000px;display:block;width:0;background:transparent;overflow:visible;z-index:1;">
<div class="footer-more-trigger most-footer freeze-layer cloud-footer" style="margin:0px auto;width:390px;height:100%;background:url(http://img04.taobaocdn.com/imgextra/i4/759415648/TB2qGVmapXXXXbAXXXXXXXXXXXX_!!759415648.png) repeat-y 50% 0px fixed;left:-390px;background-color:transparent;overflow:visible;display:block;border:0;padding:0;z-index:1;"></div>
<div class="footer-more-trigger most-footer freeze-layer cloud-footer" style="margin:0px auto;width:390px;height:100%;background:url(http://img04.taobaocdn.com/imgextra/i4/759415648/TB2qGVmapXXXXbAXXXXXXXXXXXX_!!759415648.png) repeat-y 50% 0px fixed;left:1140px;background-color:transparent;overflow:visible;display:block;border:0;padding:0;z-index:1;"></div>
</div>
</div>

点此下载：→→C店详情页百变全屏背景固定.zip　　

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/code/2014-05-29/157.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。