ie6兼容png前置与背景 -

liuyt611

浏览: 26480 次
性别:
来自: 北京

最近访客更多访客>>

ppyyll7788

LTao5461218

自由翱翔的鱼

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

ie6兼容png前置与背景

博客分类：

工作中遇到的问题

次方法需要用到一个插件：DD_belatedPNG.js

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>兼容png图片的前置与背景</title>
    <link href="css/ddd.css" rel="stylesheet" />
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    
  </head>

  <body>
    <p>一、png图片为前置img图片</p>
    
    <!--******************************************-->
    
    
    <!--[if IE 6]>  
      <script type="text/javascript" src="js/DD_belatedPNG.js" ></script>  
      <script type="text/javascript">  
        DD_belatedPNG.fix('.on img');  
      </script>  
    <![endif]-->
    <div style="background:#936;width:100px;height:100px;">
      <div class="on"><img src="images/png241_03.png" /></div>
    </div>
    
    
    
    <hr /><!--******************************************->
    
    
    <p>二、png图片作为背景图片</p>
    <!--******************************************88-->
    <div style="background:#30F;width:100px;height:100px;">
      <div class="of"></div>
    </div>
    <p>
       在第二个中，一定要注意css图片背景的路径<br />
       background:url(../images/png241_03.png);与_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/png241_03.png"); 的路径是不一样的，前者是正常的路径，后者相当于在html中的前置img的路径。
    </p>
    <!--******************************************88-->
    
  </body>
</html>

.of{
	  width:42px;
	  height:42px;
	  background:url(../images/png241_03.png);
	  _background:none;  
      _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/png241_03.png"); 
	}

在ie6中的显示结果：