部分透明的蒙版效果实现思路(兼容ie6)
发布时间：2013-08-13 15:13:13 作者：佚名 
我要评论
我要评论与普通的蒙版效果不一样，需要有一个空白的地方显示页面上原有的动态内容，具体的实现思路如下，感兴趣的朋友可以参考下，希望对大家有所帮助
先看下要实现的效果图片
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位置－图片的高度
相关文章
- 在某些情况下可能会需要背景半透明文字不透明这样的效果，实现起来并不复杂，通过滤镜便可做到，具体实现如下，感兴趣的朋友可以参考下，希望对大家有所帮助2013-08-05
- 图片透明在某些特殊的情况下还是比较实用的，下面是用滤镜写的图片透明代码，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-07-04
背景透明文字不透明的最佳方法兼容IE(以背景黑色透明度0.5为例)
本文以背景黑色，透明度0.5举例为大家详细介绍下关于背景透明，文字不透明的最佳方法同时兼容IE，具体实现如下，感兴趣的朋友可以参考下哈希望对大家有所帮助2013-07-03使用滤镜解决IE6下png图片不能透明(被渲染成默认色)的问题
IE6不支持透明，所有的透明部分，都被渲染成灰色或白色（不知道啥颜色，他自己的默认色）。这样看起来难看不说，圆角的功能荡然无存，下面与大家分享下使用滤镜解决此问题2013-06-20格式png24透明底 多种解决png24格式图片在ie6中透明问题
图片透明，锯齿问题是重构人员很头疼的问题，png24可以解决这些锯齿问题，但是ie6不支持png24透明，不过利用ie6的hack问题有两种解决的办法，感兴趣的朋友可以了解下哈2013-05-24- 想不想要自己的主页链接很炫呢，背景半透明的链接效果，空链接实现的链接效果，只需要定义一个特效式的CSS样式即可以实现，在需要实现的地方应用定义的CSS样式，也可以全站2013-02-27
- img加半透明背景实现原理：给li加上背景,li的大小就是图片的大小,在a:hover时候改变a的透明度,感兴趣的朋友可以了解下，希望本文可以帮助到你2013-01-13
- 曾经一度的采用滤镜的方法搞定这个问题，弊端是当有多个png图片的时候，这就造成了css的压力，得写多少css代码呀，也尝试过js，缺点是不支持CSS中backgrond-position与back2013-09-11
最新评论