虽然艺灵之前也写过一些有关淘宝店铺装修教程的文章，但总觉得不足详细。以是准备重新写一系列详细的教程，每篇教程都会以笔墨+图片+视频的办法来为看官详细剖析各个问题。此系列教程紧张以淘宝或天猫店铺装修为主，但里面的技巧同样适用于其他平台乃致小前端。
本日我们来讲一个装修中常常碰着的问题：png格式的图片在店铺中涌现了白底 ，如图：
切图时明明是png，可在店铺中却涌现了尴尬的白底
是不是觉得木有爱了？现实怎么可以介个样子......
这个白底实在是系统模块自带的背景色。来张代码截图：
查看代码后才创造原来是系统模块自带的背景色
如果看官对代码不感冒的话，那艺灵就用看官常用的ps来说事吧。
每当打开ps的时候，会有一个默认的白底画布，而此时的这个画布就相称于店铺中的那个模块。ps中画布的背景色就相称于模块的背景色。如图：
ps中的图层和网页中的模块的事理是一样的
现在看官能理解了吗？
可能有些看官会有这样的迷惑：“那为什么我的另一个店铺中就没有这个白底呢？”
实在，有关白底，这里面是大有文章的！
1.1、店铺模板
介于条件条件，这里我们主讲淘宝和天猫。淘宝分根本版、专业版以及新推出的智能版；淘宝根本版供应一套免费模板，淘宝专业版则供应三套模板；而天猫就省事儿的多。
为了便于理解，来张草图吧：
淘宝和天猫店铺模板草图
(补充解释：天猫专营店、天猫旗舰店、极有家等这些跟文章是无关的。)
可能此时有很多看官不能理解：“既然讲白底产生的缘故原由，你跟我扯这么多乱七八糟的干嘛，直接撸起袖子开干啊！
”
不管干不干，艺灵还是须要先给看官理清下思路，即便看官以为这是件非常无聊的事情！
如果看官已确定不须要知道这些细节的话，可以直接跳过这里向下查看办理方案即可。
1.2、模板对了，装修就方便多了
正如小标题说的那样：选对了模板才能更快更好的装修！
而不同的模板，自带的功(权)能(限)也略微不同。正因如此，以是有的看官店铺中的模板没有白底而有的却有。有些看官可能不清楚模板在哪里改换，点击导航栏中的“模板管理”即可进入模板页面，如图：
模板管理中可切换模板和规复模板
1.3、不建议装修后再切换模板
此时可能有看官会说：“既然这样的话，那我切换下模板不就好了”？
要知道，切换模板后，店铺就规复到默认模板状态，之前装修的效果就会没了！
如果看官须要想规复以前辛辛劳苦装修了好几天的效果的话，现在就只能用大量的复制--粘贴来实现了。
2.1、源头办理
便是装修开始前就选择对的模板，这样的话后面就不用担心这种问题了。做这个决定的时候，还请看官推敲下韶光本钱。
2.2、修正html代码
这个操作相对上面的要繁芜一些，由于要牵扯得手动改代码。但看官也不症结怕，只须要节制固定格式即可。下面艺灵将以一个真实案例讲下怎么操作，有兴趣的看官可以看下视频。
（不知道这里上传的视频末了会是啥样子）
视频加载中...
上面这个视频紧张讲的便是：6月16号下午，qq好友阿飞找到了我，让我帮他办理一个小问题。随后我远程了桌面并帮他办理了问题。由于当时是上班的，以是未便利语音。
下面艺灵就说下当天的解题思路吧：
1、不雅观察代码构造，然后给出最佳方案；
阐明一下：实在很多时候，一个问题的解是有很多种的。在这些解中，选择本钱最小、效率最高的才是最得当的！
由于不同的美工切图办法不同以及写的代码风格不同，这就导致后面可能会涌现各种各样的问题。以是，先看代码构造是紧张步骤。
2、根据代码给出方案；
阐明一下：阿飞的代码块有一个最外层父级包裹着，内层都是png图，以是这个时候我们给最外层父级添加一个背景图即可。如图：
找到问题后开始用审查元素办理问题
干系代码：background:url(图片地址) no-repeat center 0;
当我们在页面中调试成功后，下一步便是去店铺后台找到对应的代码位置，然后按刚才的方法粘贴背景代码即可。这个过程在上面的视频1分钟的时候我有做重点回答，看官可以回放看下。
如果看官对刚才的操作不是很理解的话，艺灵同样可以用ps的方法来给看官讲解下。
在ps中出设计稿的时候，会有底图层、png元素层以及一些其他的图层。但始终无法改变的事实是：底图层永久在这些元素的下面！
如果去掉底图层前面的小眼睛的话，此时的底图层就相称于一个透明层。现在再看看我们的代码，父级就相称于那个底图层，由于没有添加背景，以是跟ps中关闭小眼睛的道理是一样一样的。现在我们只须要给父级添加一个背景，也便是开启小眼睛操作就可以实现跟ps中一样的效果。
2.3、用带背景的图来替代png
这个方法并没有什么技能含量，只是改变了美工在切图时的思维而已！
既然png层+底图层=终极效果，那为什么带底图背景的图层就不能即是终极的效果呢？
好了，这个问题就讲解完了，不知道看完学会了没。
三、为什么不用css！末了来补充一个小问题：为什么不用css干掉模块的背景色！
或许会有生手的看官问这个问题。
这个怎么说呢......
特么一个穷屌丝，哪儿来的钱开通旺铺css(2400/年)做事！
？如图：
淘宝做事市场中的旺铺css功能2400每年
以是，不要以为你可以在淘宝或天猫中想怎么写代码就怎么写，看官得现实点！
----------完----------
