ie6兼容png前置与背景

最新推荐文章于 2024-06-13 14:36:30 发布

u010818109

最新推荐文章于 2024-06-13 14:36:30 发布

阅读量72

点赞数

分类专栏：工作中遇到的问题文章标签： xhtml javascript ViewUI

本文链接：https://blog.csdn.net/u010818109/article/details/84461415

版权

工作中遇到的问题专栏收录该内容

12 篇文章 0 订阅

订阅专栏

次方法需要用到一个插件：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中的显示结果：

[img]http://dl2.iteye.com/upload/attachment/0087/3002/a2efcc4d-36af-3cae-b3b9-5a95f6451402.gif[/img]
所用的到得图片和插件：

[img]http://dl2.iteye.com/upload/attachment/0087/3000/2edc84b8-8b89-3fd9-9e6c-16e01ee6c48d.png[/img]