《web标准技术学习-ie中32位色png透明背景图片》

下载本书

添加书签

web标准技术学习-ie中32位色png透明背景图片- 第1节


按键盘上方向键 ← 或 → 可快速上下翻页,按键盘上的 Enter 键可回到本书目录页,按键盘上方向键 ↑ 可回到本页顶部!
    
      今天的一个问题;32位色的透明背景PNG图片无法有IE上透明处理;在其实很早的时候就遇到过。因为有两年多没搞过了;也就不记得了。
      在这里提供解决方案二个。可以用css或javascript处理!

      js:
      var arVersion = navigator。appVersion。split(〃MSIE〃)
      var version = parseFloat(arVersion'1')

      function fixPNG(myImage) 
      {
         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 = 〃〃
           myImage。outerHTML = strNewHTML    
         }
      }

      以上这段代码保存为pngfix。js文件;然后在HTML文件的 之间插入;记住保存啦。
      要被处理的图片可以这么用



      CSS:
      。trans_box2 {
       font…family:verdana;
       font…weight:bold;
       padding:40px;
       margin:30px;
       border:solid 1px #555;
       /* Mozilla ignores crazy MS image filters; so it will skip the following 
      */
         filter:progid:DXImageTransform。Microsoft。AlphaImageLoader(enabled=true; 
      sizingMethod=scale 
      src=''''/csssite/uploadfile/200806/15/F10642856。png'''');
      }
      /* IE ignores styles with 'attributes'; so it will skip the following。 */
      。trans_box2'class' {
       background…image:url(/csssite/uploadfile/200806/15/F10642856。png);
      }


      HTML:
      
      
      I like flowers。
      
      
      They smell nice。
      
      
      When 
      bined with bees; they make honey。。。
      



      引用语法:
      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 地址指定背景图像。假如忽略此参数,滤镜将不会作用。 

      说明:
      在对象容器边界内,在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network 
      Graphics)格式,则0%…100%的透明度也被提供。
      PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说,你可以选择显示在PNG(Portable 
      Network Graphics)格式的图片完全透明区域后面的内容。
     
小提示:按 回车 [Enter] 键 返回书目,按 ← 键 返回上一页, 按 → 键 进入下一页。 赞一下 添加书签加入书架