<dl id="tkyfw"><ins id="tkyfw"></ins></dl>
    <dl id="tkyfw"><ins id="tkyfw"></ins></dl>
    <div id="tkyfw"></div>

      <sup id="tkyfw"></sup>
      <big id="tkyfw"></big>
        當前位置:朝夕網 > 幫助中心 > ie6下png站標制作的圖片透明失效的處理方法 >
             幫助導航

        關于我們
        版權聲明
        閱讀服務條款
        朝夕網贊助服務
        聯系我們
        友情鏈接
        朝夕網發展歷史
        關于QQ管家誤報朝夕網的
        制作幫助
        ie6下png站標制作的
        如何查找自己需要的素材?
        注冊朝夕圖片網的好處
        如何使用朝夕banner
        QQ郵箱如何使用本站生成
        非IE瀏覽器如何保存圖片
        廣告條制作基礎篇幫助信息
        基礎知識
        Banner在線制作有什
        關于Aleo Flash
        logo簡單介紹,一些關
        制作工具Flash Ba
        主頁Banner制作好幫
        banner是什么意思?
        banner常見尺寸,有
        本站公告
        新功能:部分圖片制作模板
        朝夕banner在線制作
        banner制作網密碼安
        建議注冊會員使用廣告設計
        本站暫未提供手工制作ba
        歡迎淘寶客使用淘寶ban
        設計教程
        透明站標制作教程,如何制
        適合菜鳥的初級banne
        如何用DreamWeav
        flash的as關于一個
        老教材Fireworks
        banner設計教程中的
        如何制作吸引人的bann

        ie6下png站標制作的圖片透明失效的處理方法


        標簽:png ie6 

        FF火狐瀏覽器和IE7以上以及谷歌的瀏覽器都已經直接支持透明的png(png-24)圖了,下面這些方法主要是解決IE6下透明PNG站標制作的圖片有灰底的問題(大家都知道我們用ie6的人還非常多,所以需要處理下,不能隨意放棄你的網友喲)

        方法一定義css樣式:

        style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/fl.png')"

        語法:
        filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

        enabled : 可選項。布爾值(Boolean)。設置或檢索濾鏡是否激活。true | false true : 默認值。濾鏡激活。
        false : 濾鏡被禁止。

        sizingMethod : 可選項。字符串(String)。設置或檢索濾鏡作用的對象的圖片在對象容器邊界內的顯示方式。 crop : 剪切圖片以適應對象尺寸。
        image : 默認值。增大或減小對象的尺寸邊界以適應圖片的尺寸。
        scale : 縮放圖片以適應對象的尺寸邊界。

        src : 必選項。字符串(String)。使用絕對或相對 url 地址指定背景圖像。假如忽略此參數,濾鏡將不會作用。

        特性:
        Enabled : 可讀寫。布爾值(Boolean)。參閱 enabled 屬性。
        sizingMethod : 可讀寫。字符串(String)。參閱 sizingMethod 屬性。
        src : 可讀寫。字符串(String)。參閱 src 屬性。

        說明:
        在對象容器邊界內,在對象的背景和內容之間顯示一張圖片。并提供對此圖片的剪切和改變尺寸的操作。如果載入的是PNG(Portable Network Graphics)格式,則0%-100%的透明度也被提供。
        PNG(Portable Network Graphics)格式的圖片的透明度不妨礙你選擇文本。也就是說,你可以選擇顯示在PNG(Portable Network Graphics)格式的圖片完全透明區域后面的內容。

        實例:解決IE6下png透明失效的問題。

        CSS樣式:

        .png{
        _background: url(http://www.3998206.com/images/mymake/2012/6/2012062802142381773.png) no-repeat !important;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=noscale, src="http://www.3998206.com/images/mymake/2012/6/2012062802142381773.png");
        background:none;
        width:118px;height:133px;
        }

        .png div{position:relative;}

        HTML代碼:

        <div class="png">
        <div>
        CSS 背景PNG透明 及 鏈接失效問題解決
        </div>
        </div>

        /*
        兼容IE6.0、IE7.0、FF,
        IE7.0和新版的FF其實是可以不加filter濾鏡直接透明的。
        */

        第 1 種方法:定義一個樣式,給某個div應用這個樣式后,div的透明png背景圖片自動透明了。(注意兩處圖片的路徑寫法不一樣,本例中,icon_home.png圖片與html文件在相同目錄)

        <!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=gb2312" />
        <title>無標題文檔</title>
        <style type="text/css">
        <!--
        .qq {
        height: 90px;
        width: 90px;
        background-image: url(http://www.3998206.com/images/mymake/2012/6/2012062802142381773.png)!important;/* FF IE7 */
        background-repeat: no-repeat;

        _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.3998206.com/images/mymake/2012/6/2012062802142381773.png'); /* IE6 */
        _ background-image: none; /* IE6 */
        }
        -->
        </style>
        </head>

        <body>

        <div class="qq"></div>

        </body>
        </html>

        第 2 種方法: 給img定義樣式,頁面上所有透明png即自動透明了。(這方法只對直接插入的圖片有效,對背景圖無效注意,要準備一個透明的小圖片transparent.gif,大小不限。必須放在和html相同的目錄
        請勿大量使用,否則會導致頁面打開很慢!!!)

        <!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=gb2312" />
        <title>無標題文檔</title>
        <style type="text/css">
        .mypng img {
        azimuth: expression(
        this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
        this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
        this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
        this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
        this.runtimeStyle.backgroundImage = "none")),this.pngSet=true);
        }

        </style>
        </head>

        <body>
        換成你的png圖片
        <div class="mypng">
        <img src="icon_face_07.png" width="30" height="30" />
        <img src="icon_face_10.png" width="30" height="30" />
        <img src="icon_face_08.png" width="30" height="30" />
        </div>
        </body>
        </html>

         

        第 3 種方法:用JS實現,加上一段js代碼后,所有插入的透明png自動透明了.(注意,這方法也是只對直接插入的圖片有效,對背景圖無效

        <!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=gb2312" />
        <title>朝夕網</title>
        <script language="JavaScript">
        function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
        {
            var arVersion = navigator.appVersion.split("MSIE")
            var version = parseFloat(arVersion[1])
            if ((version >= 5.5) && (document.body.filters))
            {
               for(var j=0; j<document.images.length; j++)
               {
                  var img = document.images[j]
                  var imgName = img.src.toUpperCase()
                  if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
                  {
                     var imgID = (img.id) ? "id='" + img.id + "' " : ""
                     var imgClass = (img.className) ? "class='" + img.className + "' " : ""
                     var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
                     var imgStyle = "display:inline-block;" + img.style.cssText
                     if (img.align == "left") imgStyle = "float:left;" + imgStyle
                     if (img.align == "right") imgStyle = "float:right;" + imgStyle
                     if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
                     var strNewHTML = "<span " + imgID + imgClass + imgTitle
                     + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
                     + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
                     + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
                     img.outerHTML = strNewHTML
                     j = j-1
                  }
               }
            }    
        }
        window.attachEvent("onload", correctPNG);
        </script>
        <style type="text/css">
        <!--
        body {
        background-color: #9999CC;
        }
        -->
        </style></head>

        <body>
        把圖片換成你自己的圖片
        <img src="img/icon_face_03.png" width="30" height="30" /><!--把圖片換成你自己的圖片 -->
        <img src="img/icon_face_05.png" width="30" height="30" />
        <img src="img/menu_title_over.png" width="130" height="36" />
        </body>
        </html>     



        方法四

        <script language="javascript">
        // 修復 IE 下 PNG 圖片不能透明顯示的問題
        function fixPNG(myImage) {
        var arVersion = navigator.appVersion.split("MSIE");
        var version = parseFloat(arVersion[1]);
        if ((version >= 5.5) && (version < 7) && (document.body.filters))
        {
             var imgID = (myImage.id) ? "id='" + myImage.id + "' " : "";
             var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : "";
             var imgTitle = (myImage.title) ? "title='" + myImage.title   + "' " : "title='" + myImage.alt + "' ";
             var imgStyle = "display:inline-block;" + myImage.style.cssText;
             var strNewHTML = "<span " + imgID + imgClass + imgTitle

           + " style=\"" + "width:" + myImage.width

           + "px; height:" + myImage.height

           + "px;" + imgStyle + ";"

           + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"

           + "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>";
             myImage.outerHTML = strNewHTML;
        } }

        window.onload=function(){
                 document.getElementById("top").style.height=screen.height/5+"px";
                
        }//
        </script>


        用法如下:
        <img src="http://www.3998206.com/images/mymake/2012/6/2012062802142381773.png" border="0" onload="fixPNG(this)" />

        相關信息


        Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in /alidata/www/zhaoxi/mbhelp.php on line 181

        Warning: mysql_free_result(): supplied argument is not a valid MySQL result resource in /alidata/www/zhaoxi/mbhelp.php on line 187
        如果您對本信息有什么建議,請【直接留言給我們】
        pc蛋蛋28官网

          <dl id="tkyfw"><ins id="tkyfw"></ins></dl>
          <dl id="tkyfw"><ins id="tkyfw"></ins></dl>
          <div id="tkyfw"></div>

            <sup id="tkyfw"></sup>
            <big id="tkyfw"></big>

                <dl id="tkyfw"><ins id="tkyfw"></ins></dl>
                <dl id="tkyfw"><ins id="tkyfw"></ins></dl>
                <div id="tkyfw"></div>

                  <sup id="tkyfw"></sup>
                  <big id="tkyfw"></big>