手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >部分透明的蒙版效果实现思路(兼容ie6)
部分透明的蒙版效果实现思路(兼容ie6)
摘要:先看下要实现的效果图片png24位的图片如下与普通的蒙版效果不一样,需要有一个空白的地方显示页面上原有的动态内容;实现思路如下:1:要支持图...

先看下要实现的效果图片

1

png24位的图片如下

2

与普通的蒙版效果不一样,需要有一个空白的地方显示页面上原有的动态内容;

实现思路如下: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)】相关文章:

用css实现透视效果

利用CSS实现禁止双击选择页面内容的实例展示

纯css实现的tab切换效果

使用css实现全兼容tooltip提示框

css图片透明效果

在CSS中关于字体处理效果的思考

图片垂直居中css写法兼容ie6

CSS文章列表切换选项卡效果实例

Firefox和IE通用的三则网站重构实用技巧

CSS代码当前页效果的实现

精品推荐
分类导航