CSS中DIV弹出层问题解决方案

开发 前端
大家平时DIV弹出层时是否遇到过一些问题,这里向大家描述一下解决DIV弹出层png透明问题与弹出层内容显示问题的方法,希望对你的学习有所帮助。

本文向大家描述一下DIV弹出层问题解决方案,主要有两种解决方法,一种是关于如何让png背景在IE6下透明,另一种是DIV弹出层时,层下内容透过DIV弹出层显示出来,解决方案是在DIV弹出层内加iframe,DIV弹出层本身要加定位(position:relative/absolute),要强调的是iframe要加透明滤镜。

DIV弹出层问题解决方案

本文给大家讲解一下平常在做DIV弹出层遇到的问题解决方法,主要有两种方式。下面请看:

一、关于如何让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背景时写结构要谨记这一点。

二、DIV弹出层时,层下内容透过DIV弹出层显示出来,解决方案是在DIV弹出层内加iframe,DIV弹出层本身要加定位(position:relative/absolute),要强调的是iframe要加透明滤镜,visibility是inherit

  另外建议将width,height直接写在iframe上,因为不同的DIV弹出层尺寸也是不同的。
  大概结构如下:

Code 

  1. <style>    
  2. iframe{      
  3. z-index:-1;      
  4. position:absolute;      
  5. top:0px;      
  6. left:0;      
  7. border:0none;          
  8. visibility:inherit;      
  9. filter:Alpha(opacity=0);    
  10. }    
  11. </style>    
  12. <divclassdivclass="popUp">      
  13. iframestyle="width:100%;height:200px;"></iframe>      
  14. <div>contentinpopuplayer</div>    
  15. </div> 
  16.  

文章来自学IT网:http://www.xueit.com/html/2009-12-31/36-817097565140.html

【编辑推荐】

  1. 学习笔记 剖析CSS缩写六大规则
  2. CSS样式表特点及嵌入网页的四种途径
  3. 三种方法实现CSS样式表插入
  4. CSS外边距设置属性margin用法
  5. 探究CSS高级语法中选择器分组和CSS继承用法
责任编辑:佚名 来源: xueit.com
相关推荐

2010-08-23 14:06:57

DIV+CSS

2010-08-30 12:46:42

DIV+CSS

2010-08-26 12:59:29

marginCSS

2010-08-26 10:56:16

CSStextarea

2010-04-28 19:24:17

Hp unix

2012-05-09 10:08:41

跨机房

2010-09-27 13:14:42

JVM内存限制

2010-03-30 16:04:34

Linux Nginx

2010-08-31 16:26:31

CSSFirefoxdiv

2010-02-05 09:56:04

三层交换机

2010-09-09 15:44:21

IEFFCSS

2011-03-23 16:38:28

LAMP

2010-10-08 13:09:38

JavaScript数

2010-05-31 12:53:56

Nagios apac

2010-02-06 14:54:11

C++指针漂移

2010-08-31 16:09:04

DIV+CSS

2010-09-15 14:14:29

IE6position

2010-07-30 12:40:00

Flex跨域访问

2010-08-26 08:45:32

margin:0pxa

2010-02-23 17:49:56

WCF传输大数据
点赞
收藏

51CTO技术栈公众号