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

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

淘宝美工设计师分析一个提问率最多的效果：背景固定，模块透明。效果如下：
http://ysbl.tmall.com/p/maijiaxiu.htm

1.页面固定背景通用手法：直接在导航自定义css中输入

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

复制代码

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

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




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


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





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

1. <div>
   

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

3. 
   

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

5. 
   

6.  </div>
   

7. 
   

8. </div>

复制代码

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

上面案例参考代码如下：

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

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

3.    <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;">
   

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

5.        <tbody>
   

6.          <tr>
   

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

8.               </td>
   

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

10.               </td>
    

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

12.               </td>
    

13.          </tr>
    

14.          <tr>
    

15.            <td height="216">
    

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

17.          </tr>
    

18.          <tr>
    

19.            <td height="258">
    

20.              <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>
    

21.          </tr>
    

22.          <tr>
    

23.            <td height="154">
    

24.              <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>
    

25.          </tr>
    

26.          <tr>
    

27.            <td height="222">
    

28.              <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>
    

29.          </tr>
    

30.          <tr>
    

31.            <td height="358">
    

32.              <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>
    

33.          </tr>
    

34.          <tr>
    

35.            <td height="182">
    

36.              <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>
    

37.          </tr>
    

38.          <tr>
    

39.            <td height="359">
    

40.              <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>
    

41.          </tr>
    

42.          <tr>
    

43.            <td height="235">
    

44.              <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>
    

45.          </tr>
    

46.          <tr>
    

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

48.               </td>
    

49.          </tr>
    

50.        </tbody>
    

51.      </table>
    

52.    </div>
    

53.  </div>
    

54. </div

复制代码