头闻号

历城区鑫亮化工产品经营部

其他合成树脂|氧化铁红

首页 > 新闻中心 > 科技常识:部分透明的蒙版效果实现思路(兼容ie6)
科技常识:部分透明的蒙版效果实现思路(兼容ie6)
发布时间:2023-02-01 09:51:04        浏览次数:2        返回列表

今天小编跟大家讲解下有关部分透明的蒙版效果实现思路(兼容ie6) ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关部分透明的蒙版效果实现思路(兼容ie6) 的相关资料,希望小伙伴们看了有所帮助。

先看下要实现的效果图片 png24位的图片如下 与普通的蒙版效果不一样 需要有一个空白的地方显示页面上原有的动态内容; 实现思路如下:1:要支持图的半透明效果 需要采用png24格式(png8不支持半透明效果 保存后会变成底色位黑色的图片) 为兼容ie6需要加hack: _background:0; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://www.aidi.net.cn//css/图片的路径',sizingMethod='crop'); 2:建立蒙版 此蒙版只要罩住除图片以外的部分即可 图片所在的区域不能挡住 那么如何实现第二部 a:建立一个背景色为透明的div用来存储照片所在的部分 div的宽度和高度就等于图片的宽度和高度; b:蒙版部分通过div的border进行设置 border的颜色为黑色 透明度为50 那么border的四个width如何设置   *border-left-width:图片的left位置   *border-right-width:屏幕宽度-图片的left位置-图片的宽度   *border-top-width:图片的top位置   *border-bottom-width:页面高度-图片的top位置-图片的高度

来源:爱蒂网