淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 54735|回复: 213
收起左侧

细说何为【天猫】透明背景

  [复制链接]
  • TA的每日心情
    思考
    2016-12-8 10:01
  • 签到天数: 615 天

    连续签到: 1 天

    [LV.9]已臻大成

    29

    主题

    625

    帖子

    14万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    149364

    最佳新人热心会员宣传达人

    发表于 2014-1-5 22:11:45 | 显示全部楼层 |阅读模式
    本帖最后由 Banner 于 2014-1-5 22:18 编辑

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

    分析一个提问率最多的效果:背景固定,模块透明。效果如下:
    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.   </div>
    6.   
    7. </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
    复制代码










    评分

    参与人数 21美工币 +468 收起 理由
    羽滿應龍 + 10 很给力!
    shuxing + 10
    龍的傳人 + 20 赞一个!
    梦星天马 + 8 感谢分享!
    小小糯米团 + 10 感谢分享!
    xjhdqq + 10 感谢分享!
    ay198956 + 20 很给力!
    圆子猪猪 + 10 一看就是好帖,给力的分享~睡一觉慢慢来看.
    薄情 + 2 感谢分享!
    Asiya + 10 大神,提供个学代码的网址或建议呗!!!.
    LvyDas + 20 屌丝大神,留名!
    漠然 + 20 赞一个!
    良民lee + 10 很给力!
    斯洛文day + 8 你这么牛B,你家里人知道吗?
    い☆ve承諾 + 20 很给力!
    herophe + 20 很给力!晚上捡肥皂!
    簪花吹雨 + 20 支持屌丝神
    俱俊贤 + 20 很给力!
    gxzhou + 100 很给力!
    rain聪迹天涯 + 20 很给力!

    查看全部评分

    本帖被以下淘专辑推荐:

    美工帮 www.ms580.cn 免费的美工学习教程
  • TA的每日心情
    思考
    2016-11-23 22:16
  • 签到天数: 582 天

    连续签到: 1 天

    [LV.9]已臻大成

    17

    主题

    877

    帖子

    14万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    143045

    天猫美工最佳新人热心会员宣传达人推广达人淘宝钻级店美工

    发表于 2014-1-5 23:46:36 | 显示全部楼层
    我靠···这个终于可以解决整整困扰我4个月的问题了···之前问很多的大神都不清楚····功夫不负有心人······谢谢

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    无奈
    2017-1-19 12:26
  • 签到天数: 297 天

    连续签到: 1 天

    [LV.8]自成一派

    54

    主题

    2483

    帖子

    9万

    积分

    超级版主

    阅读权限: 150

    超级大菜鸟

    Rank: 18Rank: 18Rank: 18Rank: 18Rank: 18

    积分
    91036

    最佳新人热心会员宣传达人推广达人活跃会员优秀版主

    发表于 2014-1-5 22:18:11 | 显示全部楼层
    超给力的屌丝哥啊
    不过我估计还是很多人不懂。说白了就是在DIV框架里面再插入一次固定背景。
  • TA的每日心情

    2016-4-27 17:18
  • 签到天数: 157 天

    连续签到: 1 天

    [LV.7]炉火纯青

    46

    主题

    720

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    51230

    公司淘宝店铺

    发表于 2014-1-5 22:21:51 | 显示全部楼层
    屌丝哥一发帖就惊为天人。。。

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    求抱抱
    2014-12-16 10:56
  • 签到天数: 20 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    0

    主题

    46

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    12768

    发表于 2014-1-5 22:31:23 | 显示全部楼层
    好像很厉害的养子 。。。

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情

    2016-7-20 09:06
  • 签到天数: 231 天

    连续签到: 2 天

    [LV.7]炉火纯青

    0

    主题

    34

    帖子

    6万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    66932

    发表于 2014-1-5 22:55:52 | 显示全部楼层
    等了好久,终于出现了

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    臭美
    2015-12-1 12:29
  • 签到天数: 15 天

    连续签到: 2 天

    [LV.4]初窥堂奥

    9

    主题

    98

    帖子

    7617

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    7617

    发表于 2014-1-5 23:27:46 | 显示全部楼层
    分析的透彻,太牛了

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    抱抱
    2016-3-15 16:25
  • 签到天数: 310 天

    连续签到: 1 天

    [LV.8]自成一派

    3

    主题

    447

    帖子

    8万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    83649

    最佳新人热心会员

    发表于 2014-1-6 02:24:53 | 显示全部楼层
    有时候思维的转换才是关键。

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    不爽
    2015-2-1 23:13
  • 签到天数: 75 天

    连续签到: 1 天

    [LV.6]渐入佳境

    0

    主题

    56

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    33176

    发表于 2014-1-6 08:40:09 | 显示全部楼层
    极好的
  • TA的每日心情
    大哭
    2017-3-7 14:43
  • 签到天数: 416 天

    连续签到: 1 天

    [LV.9]已臻大成

    63

    主题

    355

    帖子

    10万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    101162

    发表于 2014-1-6 08:40:59 | 显示全部楼层
    我的智商是理解不了这么复杂的问题的
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|小黑屋|Archiver|手机版|粤公网安备44060502000322号|淘宝美工论坛 ( 桂ICP备12007265号-8 )  

    GMT+8, 2017-3-25 18:35 , Processed in 0.135871 second(s), 44 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表