南强小屋 Design By 杰米
先看下要实现的效果图片
png24位的图片如下
与普通的蒙版效果不一样,需要有一个空白的地方显示页面上原有的动态内容;
实现思路如下:1:要支持图的半透明效果,需要采用png24格式(png8不支持半透明效果,保存后会变成底色位黑色的图片)
为兼容ie6需要加hack:
_background:0;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='图片的路径',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位置-图片的高度
png24位的图片如下
与普通的蒙版效果不一样,需要有一个空白的地方显示页面上原有的动态内容;
实现思路如下:1:要支持图的半透明效果,需要采用png24格式(png8不支持半透明效果,保存后会变成底色位黑色的图片)
为兼容ie6需要加hack:
_background:0;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='图片的路径',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位置-图片的高度
标签:
透明,蒙版,兼容ie6
南强小屋 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
南强小屋 Design By 杰米
暂无部分透明的蒙版效果实现思路(兼容ie6)的评论...