前言：

经常有同志在群里问，为什么PS里面做的明明是透明图，为什么放进淘宝店就是自带白色背景了呢？话不多说，直接上图（注：由于我没有天猫店，所以用的另一个淘宝店的第二套模板演示）

图片可能不清楚，不过没关系，图片只是方便阅读，只要能稍微看清楚点就可以，不影响内容

如上图所示，这时候有吃瓜群众表示不理解了。天不怪地不怪淘宝最怪。明明PS里面做的是透明的图片，咋放店铺里面就会有白底呢？

吃瓜群众不要着急，且听米老湿细细道来。看下图

吃瓜群众表示一脸茫然，大湿 你还是太年轻了，你以为截个图我就看得懂了吗，你错了。

那上面图是什么意思呢。这里米老湿告诉大家一个关于店铺自定义模块的小八卦

其实我们放进自定义模块的代码，不是放进去是什么就是什么，我们的代码其实是放在了自定义模块框架里面的一个名叫span 的小兄弟里面，而外面还有一个自定义模块框架把这位小兄弟抱起来了。

所以产生白底的罪魁祸首，是他就是他，我们滴敌人 小哪吒。。（好像跑错片场了，言归正传）罪魁祸首就是一个名叫skin-box-bd的class名。这位仁兄自带光环，一出生淘宝就给了它一个背景色白色的BUFF加成，所以你说它强不强。

那么吃瓜群众，又要问了。老湿 知道了原因，那么该怎么清除它的BUFF 让他不要那样强捏？

不要捉急，再听老湿细细道来。这位兄台 请看这边。为了方便兄台更直观理解，我专门用PS图层的概念来解释解释。看下图

我们都知道的，其实图片呢，就是一个个的素材图层叠加在一起最终显示的结果。那么如果我吧PS一个项目比作是自定义模块。那么是不是会得到以下结论，老湿推理秀开始：

图层-透明层 -----> 放进自定义模块的透明图

图层-底层 -----> 自定义模块白色背景

我们在PS里面 要想给透明图加个背景会怎么做？睡吧睡吧需要在透明层和底层之间再放一个背景层，如上图，就可以了

图层-透明层 ------> 放进自定义模块的透明图

图层-背景图 ------> 自定义内透明图外加个背景图

图层-底层 -----> 自定义模块白色背景

是不是按照上面的操作就可以解决了呢？如果上面看明白了，各位吃瓜群众 跟着老湿的步伐继续往下看。

（骚等片刻，老湿道理我看明白了，但是还是不知道怎么做啊？）

这位同学 不要着急，第三次听老湿细细道来。解决办法如下：

再说解决办法前，老湿先设定一个场景

【主角】：透明图 自定义模块

【道具】：DW

【导演】：米色老湿

【编剧】：米色老湿

【剧情】：假设我已经在店铺加了一个页面固定背景。现在想添加一个自定义模块，在自定义模块里面放一张透明图。但是现实白底，看不到下面的固定背景图

【主角进场】：<img src="背景图" alt="美设网" />

【解决办法】：

<div style="background:transparent url(固定背景图) fixed center top no-repeat; width:图片宽度px; height:图片高度px;">

<img src="背景图" alt="美设网" />

</div>

只需要在图片代码外面加一个DIV，然后设置这个样式就可以解决......

（老湿，骚等片刻，代码里面都什么东东，看不懂呢）

这位兄台喜欢思考 是个好习惯，那么老湿来说说代码意思

transparent 背景色透明

url(固定背景图) 放背景图地址

fixed 背景图固定

center top 背景图定位（居中顶部对齐）

no-repeat 背景图不平铺

为啥要这样设置呢，其中需要说的是背景图固定，因为店铺里面 不可能只有一个自定义模块，所以我们要想让店铺所有需要背景透明的自定义模块都解决这个问题，就需要每个自定义模块都添加这个代码。如果背景图不固定，那看着就不像是地下背景图是一张图了，不然自定义模块之间就衔接不上，具体可以自己在店铺测试感受下。

一个似懂非懂的表情镇楼.......

最后呢，米色老湿简单说说其他可能出现的问题。

问：如果我不是单单一个透明图，是一段代码怎么办？

答：不要犹豫，不管是一张图还是一段代码，你就把那个DIV套在它外面，需要注意的是。DIV里面的宽高是你当前这个代码效果的整体宽度和高度，同时不要忘记div标签要有开始标签和结束标签哦

问：如果我的代码已经加了全屏代码怎么办？

答：这个老湿没有试过。不过可以告诉你，不管是否添加了全屏代码，你的就把这个DIV套住你的代码外面就可以。全屏代码把这个DIV代码再套住。

全屏代码

<div style="background:transparent url(固定背景图) fixed center top no-repeat; width:图片宽度px; height:图片高度px;">

你内容的代码

</div>

全屏代码结束

问：如果我的效果代码不是全屏的，加了这个DIV后，背景图不是全屏的怎么办？

答：针对这个问题，老师也有办法。下面我专门编写了一个模板，你直接套就可以

<div style="background-image:url(固定背景图); background-attachment:fixed; background-position:center top; background-repeat:no-repeat; width:1920px; height:内容高度px;">

<div style="width:内容宽度px; height:内容高度px; margin:0 auto;" data-source="米色官网:">

<!--这里整个替换成你需要添加背景图的效果代码-->

</div>

</div>

注释：

内容宽度 就是你当前内容的整体宽度

内容高度 就是你当前内容的整体高度

背景图徒弟 替换成需要加的背景图地址

<!--........--> 这个地方，连带符号，全部替换成效果代码

场记：可能有些小伙伴看到以后还是会觉得不理解，抽空编写了一个生产工具，一键解决这个问题。

工具地址：复制链接在浏览器打开

;topicid=15

最后：

阿里巴巴系列店铺分为：阿里巴巴，淘宝店，天猫店三种

其中淘宝店分基础版，专业版，智能版（天猫也有智能版）

淘宝专业版自带三套模板。第二套模板自定义模块背景默认是白色，不过页尾可以全屏，其他两套自定义模块背景透明，但是页尾不能全屏。所以根据需要旋转。需要注意的是，你用一个版本店铺或者一个模板，装修了效果，切换店铺版本或者模板的话，装修效果会丢失。所以提前做好店铺备份是很好的、

米色电商代码交流群：101527468