前端学习 -- Html&Css -- ie6 png 背景问题

时间：2021-08-08 08:43:45

在IE6中对图片格式png24支持度不高，如果使用的图片格式是png24，则会导致透明效果无法正常显示
解决方法：
1.可以使用png8来代替png24，即可解决问题，但是使用png8代替png24以后，图片的清晰图会有所下降；
2.使用JavaScript来解决该问题，需要向页面中引入一个外部的JavaScript文件,然后在写一下简单的JS代码，来处理该问题。

DD_belatedPNG_0.0.8a.js : http://www.dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.8a.js

DD_belatedPNG_0.0.8a-min.js：http://www.dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.8a-min.js

用上面这两个来处理png透明效果无法正常显示问题

使用：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .box1{

                width: 200px;

                height: 200px;

                background-image: url(img/3.png);

                background-repeat: no-repeat;

            }

            .box2{

                width: 200px;

                height: 200px;

                background-image: url(img/4.png);

                background-repeat: no-repeat;

            }

        </style>

    </head>

    <body style="background-color: #bfa;">

        <div class="box1"></div>

        <div class="box2"></div>

        <img src="img/3.png"/>

        <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>

        <script type="text/javascript">

            DD_belatedPNG.fix("*");

        </script>

    </body>

</html>

效果：

前端学习 -- Html&Css -- ie6 png 背景问题

github地址：https://github.com/soyoungboy/htmlCssStudy/blob/master/HelloHBuilder/BelatedPNG.html

相关文章