部分透明的蒙版效果实现思路(兼容ie6)
2013-08-13 15:13
411 查看
先看下要实现的效果图片
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位置-图片的高度
相关文章推荐
- 纯CSS实现背景半透明文字不透明效果兼容IE6
- css实现纯文字内容元素透明背景(兼容IE6)
- C# 鼠标拖放图片透明缩略图效果实现思路
- jquery实现图片自动轮换效果(兼容IE6,IE7)
- CSS滤镜实现png在ie6下透明效果
- jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
- Activity实现透明蒙版效果
- 兼容谷歌、火狐、IE7.0以上浏览器div+css实现的带有蒙版的半透明弹窗效果[xyytit]
- 兼容IE6、7、8和火狐的遮罩层效果实现
- 让ie6,ie7,ie8支持 css3 的部分属性实现全兼容
- 使用CSS实现透明边框的效果——兼容当前各种主流浏览器[xyytIT]
- css 实现层半透明,且块内文字不透明(兼容ie6等各种浏览器)
- jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
- JS实现兼容IE6、IE7、IE8的图片上传前预览效果
- javascript ie6兼容position:fixed实现思路
- CSS3实现圆角、阴影、透明效果并兼容各大浏览器
- CSS--border小三角[兼容IE6的边框透明效果]
- 【jQuery】利用淡入淡出效果实现兼容IE6的告警提示
- JavaScript实现兼容IE6的收起折叠与展开效果实例
- 兼容IE6、7、8和火狐的遮罩层效果实现