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

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

淘宝美工设计师分析一个提问率最多的效果：背景固定，模块透明。效果如下：
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.              <p>透明png图片或文字</p>
4.  </div>
5. </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

复制代码