淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1940|回复: 11
收起左侧

DIV布局制作的暗到明遮罩效果【更新代码】

[复制链接]
  • TA的每日心情
    吐舌头
    2016-5-19 09:16
  • 签到天数: 23 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    12

    主题

    68

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    16986

    公司淘宝店铺

    QQ
    发表于 2015-2-10 22:10:52 | 显示全部楼层 |阅读模式
    本帖最后由 木石 于 2015-2-11 12:07 编辑

    01.JPG      
    集市店版,注意第一个图片大小为470*230   其余小图都是230*230
    1. <div style="width:950px; height:470px;overflow:hidden"><div style="width:950px; height:470px;"><div style="width:470px; height:230px; float:left;"><img src="http://img04.taobaocdn.com/imgextra/i4/240559882/T2vLgkXU4XXXXXXXXX-240559882.jpg_620x10000.jpg" width="470" height="230" /></div><div style="width:230px; height:230px; float:left; margin-left:10px;"><img src="http://img03.taobaocdn.com/imgextra/i3/240559882/T2fU6RXFdaXXXXXXXX_!!240559882.jpg"  width="230" height="230"/></div><div style="width:230px; height:230px; float:left; margin-left:10px;"><img src="http://img03.taobaocdn.com/imgextra/i3/240559882/T2fU6RXFdaXXXXXXXX_!!240559882.jpg"  width="230" height="230"/></div><div style="width:230px; height:230px; float:left; margin-top:10px;"><img src="http://img03.taobaocdn.com/imgextra/i3/240559882/T2fU6RXFdaXXXXXXXX_!!240559882.jpg"  width="230" height="230"/></div><div style="width:230px; height:230px; float:left; margin-top:10px; margin-left:10px;"><img src="http://img03.taobaocdn.com/imgextra/i3/240559882/T2fU6RXFdaXXXXXXXX_!!240559882.jpg"  width="230" height="230"/></div><div style="width:230px; height:230px; float:left; margin-top:10px; margin-left:10px;"><img src="http://img03.taobaocdn.com/imgextra/i3/240559882/T2fU6RXFdaXXXXXXXX_!!240559882.jpg"  width="230" height="230"/></div><div style="width:230px; height:230px; float:left; margin-top:10px; margin-left:10px;"><img src="http://img03.taobaocdn.com/imgextra/i3/240559882/T2fU6RXFdaXXXXXXXX_!!240559882.jpg"  width="230" height="230"/></div></div><div style="width:950px; height:470px; position:relative; left:auto; top:-470px"><div class="mushi_24_1" style="width:470px; height:230px; float:left; background-color:#000;filter:alpha(Opacity=30); opacity: 0.3;cursor:pointer; "></div><div class="mushi_24_2" style="width:230px; height:230px; float:left; margin-left:10px; background-color:#000;filter:alpha(Opacity=30); opacity: 0.3;cursor:pointer; "></div><div class="mushi_24_3"  style="width:230px; height:230px; float:left; margin-left:10px; background-color:#000;filter:alpha(Opacity=30); opacity: 0.3;cursor:pointer; "></div><div class="mushi_24_4"  style="width:230px; height:230px; float:left; margin-top:10px; background-color:#000;filter:alpha(Opacity=30); opacity: 0.3; cursor:pointer;"></div><div class="mushi_24_5"  style="width:230px; height:230px; float:left; margin-top:10px; margin-left:10px; background-color:#000;filter:alpha(Opacity=30); opacity: 0.3; cursor:pointer;"></div><div class="mushi_24_6"  style="width:230px; height:230px; float:left; margin-top:10px; margin-left:10px; background-color:#000;filter:alpha(Opacity=30); opacity: 0.3;cursor:pointer; "></div><div class="mushi_24_7"  style="width:230px; height:230px; float:left; margin-top:10px; margin-left:10px; background-color:#000;filter:alpha(Opacity=30); opacity: 0.3;cursor:pointer; "></div></div><div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{ 'trigger':'.mushi_24_1', 'align':{ 'node':'.mushi_24_1', 'offset':[0,0], 'points':['cc','cc'] } }"><div style="width:470px; height:230px;"><a href="#" target="_blank"><img src="http://img04.taobaocdn.com/imgextra/i4/240559882/T2vLgkXU4XXXXXXXXX-240559882.jpg_620x10000.jpg" width="470" height="230" /></a></div></div><div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{ 'trigger':'.mushi_24_2', 'align':{ 'node':'.mushi_24_2', 'offset':[0,0], 'points':['cc','cc'] } }"><div style="width:230px; height:230px;"><a href="#" target="_blank"><img src="http://img03.taobaocdn.com/imgextra/i3/240559882/T2fU6RXFdaXXXXXXXX_!!240559882.jpg" width="230" height="230" /></a></div></div><div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{ 'trigger':'.mushi_24_3', 'align':{ 'node':'.mushi_24_3', 'offset':[0,0], 'points':['cc','cc'] } }"><div style="width:230px; height:230px;"><a href="#" target="_blank"><img src="http://img03.taobaocdn.com/imgextra/i3/240559882/T2fU6RXFdaXXXXXXXX_!!240559882.jpg" width="230" height="230" /></a></div></div><div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{ 'trigger':'.mushi_24_4', 'align':{ 'node':'.mushi_24_4', 'offset':[0,0], 'points':['cc','cc'] } }"><div style="width:230px; height:230px;"><a href="#" target="_blank"><img src="http://img03.taobaocdn.com/imgextra/i3/240559882/T2fU6RXFdaXXXXXXXX_!!240559882.jpg" width="230" height="230" /></a></div></div><div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{ 'trigger':'.mushi_24_5', 'align':{ 'node':'.mushi_24_5', 'offset':[0,0], 'points':['cc','cc'] } }"><div style="width:230px; height:230px;"><a href="#" target="_blank"><img src="http://img03.taobaocdn.com/imgextra/i3/240559882/T2fU6RXFdaXXXXXXXX_!!240559882.jpg" width="230" height="230" /></a></div></div><div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{ 'trigger':'.mushi_24_6', 'align':{ 'node':'.mushi_24_6', 'offset':[0,0], 'points':['cc','cc'] } }"><div style="width:230px; height:230px;"><a href="#" target="_blank"><img src="http://img03.taobaocdn.com/imgextra/i3/240559882/T2fU6RXFdaXXXXXXXX_!!240559882.jpg" width="230" height="230" /></a></div></div><div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{ 'trigger':'.mushi_24_7', 'align':{ 'node':'.mushi_24_7', 'offset':[0,0], 'points':['cc','cc'] } }"><div style="width:230px; height:230px;"><a href="#" target="_blank"><img src="http://img03.taobaocdn.com/imgextra/i3/240559882/T2fU6RXFdaXXXXXXXX_!!240559882.jpg" width="230" height="230" /></a></div></div></div></div>









  • TA的每日心情
    吐舌头
    5 天前
  • 签到天数: 253 天

    连续签到: 1 天

    [LV.8]自成一派

    14

    主题

    421

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    28382

    最佳新人热心会员

    QQ
    发表于 2015-2-11 08:49:47 | 显示全部楼层
    我只看看不说话

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


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

  • TA的每日心情
    抱抱
    2016-11-20 18:17
  • 签到天数: 454 天

    连续签到: 1 天

    [LV.9]已臻大成

    10

    主题

    1246

    帖子

    11万

    积分

    高级会员

    阅读权限: 50

    http://www.zcool.com.cn/u/12978141

    Rank: 8Rank: 8

    积分
    111128

    天猫美工最佳新人热心会员

    QQ
    发表于 2015-2-11 09:05:59 | 显示全部楼层
    我只看看不说话
    http://www.zcool.com.cn/u/12978141
  • TA的每日心情

    2016-9-17 13:50
  • 签到天数: 221 天

    连续签到: 1 天

    [LV.7]炉火纯青

    4

    主题

    71

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    44957

    天猫美工最佳新人

    发表于 2015-2-11 09:10:57 | 显示全部楼层
    魔手美工?收费的me ?
    本想把日子过成诗,时而简单,时而精致。不料日子却过成了我的歌,时而不靠谱,时而不着调。<禁爱>
  • TA的每日心情
    臭美
    12 小时前
  • 签到天数: 435 天

    连续签到: 1 天

    [LV.9]已臻大成

    13

    主题

    273

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    54892

    发表于 2015-2-11 09:13:50 | 显示全部楼层
    我只看看不说话

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


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

  • TA的每日心情
    吐舌头
    2016-5-19 09:16
  • 签到天数: 23 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    12

    主题

    68

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    16986

    公司淘宝店铺

    QQ
     楼主| 发表于 2015-2-11 11:59:16 | 显示全部楼层
    chqu 发表于 2015-2-11 09:10
    魔手美工?收费的me ?

    我自学语言开发的 一个装修软件  呵呵

  • TA的每日心情
    抱抱
    2016-5-3 11:19
  • 签到天数: 16 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    4

    主题

    136

    帖子

    3199

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    3199

    发表于 2015-2-11 15:46:14 | 显示全部楼层

    我只看看不说话

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


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

  • TA的每日心情
    抱抱
    昨天 08:16
  • 签到天数: 673 天

    连续签到: 5 天

    [LV.9]已臻大成

    26

    主题

    2623

    帖子

    18万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    184606

    最佳新人热心会员活跃会员灌水之王

    QQ
    发表于 2015-2-11 19:12:50 | 显示全部楼层
    我就看看不说话
    QQ交流群  107102001
  • TA的每日心情
    抱抱
    2015-3-18 13:37
  • 签到天数: 1 天

    连续签到: 1 天

    [LV.1]初学乍练

    0

    主题

    10

    帖子

    929

    积分

    新手上路

    阅读权限: 10

    Rank: 1

    积分
    929

    发表于 2015-3-18 14:27:23 | 显示全部楼层
    魔手美工吗?

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


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

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

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

    GMT+8, 2016-12-3 21:50 , Processed in 0.146842 second(s), 22 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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