淘宝美工设计师细说何为天猫透明背景

总是有人会问，天猫，怎么透明背景，代码是什么？————没有。实现起来只是一个简单的思维过程。没有什么代码。

淘宝美工设计师分析一个提问率最多的效果：背景固定，模块透明。效果如下： http://ysbl.tmall.com/p/maijiaxiu.htm
1.页面固定背景通用手法：直接在导航自定义css中输入

body{background:url(背景图片地址) no-repeat fixed center top;}

复制代码

参数：
background:url(背景图片地址)————输入地址
no-repeat————背景不重复
fixed————固定背景（相对于浏览器）
center top————背景位置（center相对于浏览器居中，top相对于浏览器顶部对齐）

这个没什么好说的，论坛一大把。层级关系如下：



不难看出；设定的body固定背景图片会在白色自定义模块下面，模块不透明。就出天猫背景不透明的问题。

2.如何解决？
转变层级关系：



将固定的背景层放到模块默认白色背景上，将其压到最下面，这样，实现透明背景。

层级关系代码：

<div>

 <div  style="background:url(背景图片)  no-repeat fixed center top;">

             <p>透明png图片或文字</p>

 </div>

</div>

复制代码

这样背景就“透明”了。其实只不过把白色背景压在了最下面。上面是最基本的层级结构，加上全屏class以及css，就ok了。

上面案例参考代码如下：

<div style="height:2050px;">

 <div class="sn-simple-logo">

   <div class="sn-simple-logo" style="left:-960px;width:1920px;z-index:1000;background:url(http://img03.taobaocdn.com/imgextra/i3/1645404296/T23Js0XalbXXXXXXXX_!!1645404296.jpg) center top no-repeat
fixed;">

     <table border="0" cellpadding="0" cellspacing="0" class="" width="1920">

       <tbody>

         <tr>

           <td rowspan="10" width="620">

              </td>

           <td height="50" width="452">

              </td>

           <td rowspan="10" width="848">

              </td>

         </tr>

         <tr>

           <td height="216">

             <img alt="" height="216" src="http://img04.taobaocdn.com/imgextra/i4/1645404296/T2lQXlXqtbXXXXXXXX_!!1645404296.png" width="452" /></td>

         </tr>

         <tr>

           <td height="258">

             <a href="http://detail.tmall.com/item.htm?spm=a1z10.1.w5003-5164007610.1.RCe6qm&id=36859281513&rn=23620d34ced8ac61afc7f99a155aa1e8&scene=taobao_shop" target="_blank"><img alt="" height="258"
src="http://img04.taobaocdn.com/imgextra/i4/1645404296/T2v6JzXBxaXXXXXXXX_!!1645404296.png" style="float:none;margin:0px;" width="452" /></a></td>

         </tr>

         <tr>

           <td height="154">

             <a href="http://detail.tmall.com/item.htm?spm=a220o.1000855.0.0.yojuUT&id=36860435552&pos=1&uuid=5c0960cb-f3e7-46d7-8157-5c46705a17c0&scm=1003.3.03054.1_AB-LR32-PR32&acm=03054.1003.1.555.36860435552_1&rn=16a92fd316d1b090b5b1a82d4561617f&scene=taobao_shop"
target="_blank"><img alt="" height="154" src="http://img01.taobaocdn.com/imgextra/i1/1645404296/T2_98cXCxaXXXXXXXX_!!1645404296.png" style="float:none;margin:0px;" width="452" /></a></td>

         </tr>

         <tr>

           <td height="222">

             <a href="http://detail.tmall.com/item.htm?spm=a1z10.1.w5003-5164007610.1.RCe6qm&id=36859281513&rn=23620d34ced8ac61afc7f99a155aa1e8&scene=taobao_shop" target="_blank"><img alt="" height="222"
src="http://img03.taobaocdn.com/imgextra/i3/1645404296/T2DmdJXyJaXXXXXXXX_!!1645404296.png" style="float:none;margin:0px;" width="452" /></a></td>

         </tr>

         <tr>

           <td height="358">

             <a href="http://detail.tmall.com/item.htm?spm=a220o.1000855.0.0.yojuUT&id=36860435552&pos=1&uuid=5c0960cb-f3e7-46d7-8157-5c46705a17c0&scm=1003.3.03054.1_AB-LR32-PR32&acm=03054.1003.1.555.36860435552_1&rn=16a92fd316d1b090b5b1a82d4561617f&scene=taobao_shop"
target="_blank"><img alt="" height="358" src="http://img03.taobaocdn.com/imgextra/i3/1645404296/T2XgIpXeRbXXXXXXXX_!!1645404296.png" style="float:none;margin:0px;" width="452" /></a></td>

         </tr>

         <tr>

           <td height="182">

             <a href="http://detail.tmall.com/item.htm?spm=a1z10.1.w5003-5164007610.1.RCe6qm&id=36859281513&rn=23620d34ced8ac61afc7f99a155aa1e8&scene=taobao_shop" target="_blank"><img alt="" height="182"
src="http://img01.taobaocdn.com/imgextra/i1/1645404296/T2aAcAXh0bXXXXXXXX_!!1645404296.jpg" style="float:none;margin:0px;" width="452" /></a></td>

         </tr>

         <tr>

           <td height="359">

             <a href="http://detail.tmall.com/item.htm?spm=a220o.1000855.0.0.yojuUT&id=36860435552&pos=1&uuid=5c0960cb-f3e7-46d7-8157-5c46705a17c0&scm=1003.3.03054.1_AB-LR32-PR32&acm=03054.1003.1.555.36860435552_1&rn=16a92fd316d1b090b5b1a82d4561617f&scene=taobao_shop"
target="_blank"><img alt="" height="359" src="http://img02.taobaocdn.com/imgextra/i2/1645404296/T2PA2OXhRbXXXXXXXX_!!1645404296.png" style="float:none;margin:0px;" width="452" /></a></td>

         </tr>

         <tr>

           <td height="235">

             <a href="http://detail.tmall.com/item.htm?spm=a1z10.1.w5003-5164007610.1.RCe6qm&id=36859281513&rn=23620d34ced8ac61afc7f99a155aa1e8&scene=taobao_shop" target="_blank"><img alt="" height="235"
src="http://img01.taobaocdn.com/imgextra/i1/1645404296/T2jjlnXktOXXXXXXXX_!!1645404296.png" style="float:none;margin:0px;" width="452" /></a></td>

         </tr>

         <tr>

           <td height="220" width="452">

              </td>

         </tr>

       </tbody>

     </table>

   </div>

 </div>

</div

复制代码