要实现天猫商城环境固定不动,控制模块透明的实际效果,其实就是并没有相匹配的编码的。完成下去只是一个简单创造性思维。并没有什么代码。不过我可能或是好多人不明白,简言之便是在DIV架构里边再插进一次固定不动环境。
下边实际的有2个天猫店铺透明背景的作用完成方式:
1.网页页面固定不动环境通用性技巧:立即在导航栏自定css中键入
主要参数:
background:url(背景图案详细地址)————键入详细地址
no-repeat————环境不重复
fixed————固定不动环境(相对于电脑浏览器)
center top————环境部位(center相对于电脑浏览器垂直居中,top相对于电脑浏览器顶端两端对齐)
层级关系如下所示:
可以看出;设置的body固定不动背景图案会在乳白色自定控制模块下边,控制模块不透明。就出天猫商城环境不全透明的难题。
2.怎样解决?
变化层级关系:
将确定的环境层放进控制模块默认设置白背景上,将其压着最下面,那样,完成透明背景。
层级关系编码:
上边实例参照编码如下所示:
<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
下边实际的有2个天猫店铺透明背景的作用完成方式:
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>
上边实例参照编码如下所示:
<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