弹层时层下内容显示出来+png背景透明解决方案
一、关于如何让png背景在ie6下透明
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,src='/images/myimg.png',sizingMethod='crop');
三个参数的具体含义如下:
enabled :可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
true :默认值。滤镜激活。
false :滤镜被禁止。
sizingMethod :可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop : 剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale :缩放图片以适应对象的尺寸边界。
src :必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数,滤镜将不会作用。
写css的时候将需要加此png背景的钩子针对ie6写个hack,*.mydiv{filter:progid:...;background:none;},注意把hack写在非hack的后面。
需要强调的是:要求png做背景透明时要固定放png背景的容器尺寸,不然会有很多神奇的现象出现,在需要透明png背景时写结构要谨记这一点
二、弹层时,层下内容透过弹层显示出来,解决方案是在弹层内加iframe,弹层本身要加定位(position:relative/absolute),
要强调的是iframe要加透明滤镜,visibility是inherit
另外建议将width,height直接写在iframe上,因为不同的弹层尺寸也是不同的。
大概结构如下:
<style>
iframe{
z-index: -1;
position: absolute;
top: 0px;
left: 0;
border:0 none;
visibility:inherit;
filter:Alpha(opacity=0);
}
</style>
<div class="popUp">
<iframe style="width:100%;height:200px;"></iframe>
<div>content in pop up layer</div>
</div>