弹层时层下内容显示出来+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>

posted @ 2009-12-31 10:42  web k  阅读(769)  评论(2编辑  收藏  举报