您的位置:1010cc时时彩经典版 > 1010cc时时彩客户端 > 1010cc时时彩经典版包括背景图,解决方法

1010cc时时彩经典版包括背景图,解决方法

发布时间:2019-08-08 10:11编辑:1010cc时时彩客户端浏览(182)

    PNG.JS代码:
    // PNGHandler: Object-Oriented Javascript-based PNG wrapper
    // --------------------------------------------------------
    // Version 1.1.20031218
    // Code by Scott Schiller - www.schillmania.com
    // --------------------------------------------------------
    // Description:
    // Provides gracefully-degrading PNG functionality where
    // PNG is supported natively or via filters (Damn you, IE!)
    // Should work with PNGs as images and DIV background images.

    复制代码 代码如下:

    FF和IE7已经直接支持透明的png图了,下面这个主要是解决IE6下透明PNG图片有灰底的

    原文发布时间为:2009-11-18 —— 来源于本人的百度文章 [由搬家工具导入]

    function PNGHandler() {
     var self = this;

    //--------------------------------------------------------------- 
    // Opacity Displayer, Version 1.0 
    // Copyright Michael Lovitt, 6/2002. 
    // Distribute freely, but please leave this notice intact. 
    //--------------------------------------------------------------- 

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

    png透明解决办法

     this.na = navigator.appName.toLowerCase();
     this.nv = navigator.appVersion.toLowerCase();
     this.isIE = this.na.indexOf('internet explorer') 1?1:0;
     this.isWin = this.nv.indexOf('windows') 1?1:0;
     this.ver = this.isIE?parseFloat(this.nv.split('msie ')[1]):parseFloat(this.nv);
     this.isMac = this.nv.indexOf('mac') 1?1:0;
     this.isOpera = (navigator.userAgent.toLowerCase().indexOf('opera ') 1 || navigator.userAgent.toLowerCase().indexOf('opera/') 1);
     if (this.isOpera) this.isIE = false; // Opera filter catch (which is sneaky, pretending to be IE by default)

    //--------------------------------------------------------------- 
    // OPACITY OBJECT 
    // 
    // Instantiates the object, defines the properties and methods. 

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

    第1 种方法:定义一个样式,给某个div应用这个样式后,div的透明png背景图片自动透明了。(注意两处图片的路径写法不一样,本例中,icon_home.png图片与html文件在相同目录)。

     this.transform = null;

    function OpacityObject(div, strPath) { 
     this.layerObject = div; 
     this.path = strPath; 
    /* if (ns){ 
      if (browserVersion>=5) { 
       this.layerObject = document.getElementById(divId).style; 
      } else {  
       this.layerObject = eval("document." divId); 
      } 
     } else { 
      this.layerObject = eval(divId   ".style"); 
     }/**/ 
     this.setBackground = od_object_setBackground; 

    // Uses AlphaImageLoader filter, or the css background property, 
    // as appropriate, to apply a PNG or GIF as the background of the layerObject. 
    function od_object_setBackground() { 
     if (pngAlpha) { 
      this.layerObject.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" this.path ".png', sizingMethod='scale')"; 
     } else if (pngNormal) { 
      if (browser.isMac && browser.isIE5up ) this.layerObject.backgroundColor = '#999999'; 
      else this.layerObject.backgroundImage = 'url(' this.path '.png)'; 
     } else { 
      this.layerObject.backgroundImage = 'url(' this.path '.gif)'; 
     } 

    //--------------------------------------------------------------- 

    enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false true : 默认值。滤镜激活。
    false : 滤镜被禁止。

    样式定义的顺序很重要!

     this.getElementsByClassName = function(className,oParent) {
     doc = (oParent||document);
     matches = [];
     nodes = doc.all||doc.getElementsByTagName('*');
     for (i=0; i<nodes.length; i ) {
     if (nodes[i].className == className || nodes[i].className.indexOf(className) 1 || nodes[i].className.indexOf(className ' ') 1 || nodes[i].className.indexOf(' ' className) 1) {
     matches[matches.length] = nodes[i];
     }
     }
     return matches; // kids, don't play with fire. ;)
     }

    //--------------------------------------------------------------- 
    // OPACITY DISPLAY FUNCTION 
    // Outputs the image as a div with the AlphaImageLoader, or with 
    // a standard image tag. 
    function od_displayImage(strId, strPath, intWidth, intHeight, strClass, strAlt) {  
     if (pngAlpha) { 
      document.write('<div style="height:' intHeight 'px;width:' intWidth 'px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='' strPath '.png', sizingMethod='scale')" id="' strId '" class="' strClass '"></div>'); 
     } else if (pngNormal) { 
      document.write('<img src="students/'+strPath+'.png" width="' intWidth '" height="' intHeight '" name="' strId '" border="0" class="' strClass '" alt="' strAlt '" />'); 
     } else { 
      document.write('<img src="students/'+strPath+'.gif" width="' intWidth '" height="' intHeight '" name="' strId '" border="0" class="' strClass '" alt="' strAlt '" />'); 
     } 

    //--------------------------------------------------------------- 

    sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop : 剪切图片以适应对象尺寸。
    image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
    scale : 缩放图片以适应对象的尺寸边界。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <html xmlns="">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>;
    <style type="text/css">
    <!--
    .qq {
    height: 90px;
    width: 90px;
    background-image: url(icon_home.png)!important;/* IE6 FF IE7 三种浏览器均认识*/
    background-repeat: no-repeat;

     this.filterMethod = function(oOld) {
     // IE 5.5  proprietary filter garbage (boo!)
     // Create new element based on old one. Doesn't seem to render properly otherwise (due to filter?)
     // use proprietary "currentStyle" object, so rules inherited via CSS are picked up.

    //--------------------------------------------------------------- 
    // OPACITY ROLL-OVER FUNCTIONS 
    function od_rollOver(strId, strColor) {  
     if (pngAlpha) { 
      document.getElementById(strId).style.backgroundColor = strColor; 
     } else { 
         if (document.images && (flag == true)) { 
             document[strId].src = eval(strId   "on.src"); 
         } 
     } 

    function od_rollOut(strId, strColor) {  
     if (pngAlpha) { 
      document.getElementById(strId).style.backgroundColor = strColor; 
     } else { 
         if (document.images) { 
             document[strId].src = eval(strId   "off.src"); 
         } 
     } 

    //--------------------------------------------------------------- 

    src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数,滤镜将不会作用。

    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png'); /* 仅IE6 */
    _ background-image: none; /*仅 IE6 */
    }
    -->
    </style>
    </head>

     var o = document.createElement('div'); // oOld.nodeName
     var filterID = 'DXImageTransform.Microsoft.AlphaImageLoader';
     // o.style.width = oOld.currentStyle.width;
     // o.style.height = oOld.currentStyle.height;

    //--------------------------------------------------------------- 
    // global variables 

    特性:
    Enabled : 可读写。布尔值(Boolean)。参阅 enabled 属性。
    sizingMethod : 可读写。字符串(String)。参阅 sizingMethod 属性。
    src : 可读写。字符串(String)。参阅 src 属性。

    <body>

     if (oOld.nodeName == 'DIV') {
     var b = oOld.currentStyle.backgroundImage.toString(); // parse out background image URL
     oOld.style.backgroundImage = 'none';
     // Parse out background image URL from currentStyle object.
     var i1 = b.indexOf('url("') 5;
     var newSrc = b.substr(i1,b.length-i1-2).replace('.gif','.png'); // find first instance of ") after (", chop from string
     o = oOld;
     o.style.writingMode = 'lr-tb'; // Has to be applied so filter "has layout" and is displayed. Seriously. Refer to 
     o.style.filter = "progid:" filterID "(src='" newSrc "',sizingMethod='crop')";
     // Replace the old (existing) with the new (just created) element.
     // oOld.parentNode.replaceChild(o,oOld);
     } else if (oOld.nodeName == 'IMG') {
     var newSrc = oOld.getAttribute('src').replace('.gif','.png');
     // apply filter
     oOld.src = 'none.gif'; // get rid of image
     oOld.style.filter = "progid:" filterID "(src='" newSrc "',sizingMethod='crop')";
     oOld.style.writingMode = 'lr-tb'; // Has to be applied so filter "has layout" and is displayed. Seriously. Refer to 
     }
     }

    // if IE5.5  on win32, then display PNGs with AlphaImageLoader 
    if ((browser.isIE55 || browser.isIE6up) && browser.isWin32) { 
     var pngAlpha = true; 
     var strExt = ".png"; 
    // else, if the browser can display PNGs normally, then do that. that list includes: 
     //     -Gecko Engine: Netscape 6 or Mozilla, Mac or PC 
     //     -IE5  Mac (OpacityObject applies the background image at 100% opacity) 
     //     -Opera 6  PC 
     //     -Opera 5  Mac (Doesn't support dynamically-set background images) 
     //     -Opera 6  Linux  
     //     -Omniweb 3.1   
     //     -Icab 1.9   
     //     -WebTV  
     //     -Sega Dreamcast 
    } else if ((browser.isGecko) || (browser.isIE5up && browser.isMac) || (browser.isOpera && browser.isWin && browser.versionMajor >= 6) || (browser.isOpera && browser.isUnix && browser.versionMajor >= 6) || (browser.isOpera && browser.isMac && browser.versionMajor >= 5) || (browser.isOmniweb && browser.versionMinor >= 3.1) || (browser.isIcab && browser.versionMinor >= 1.9) || (browser.isWebtv) || (browser.isDreamcast)) { 
     var pngNormal = true; 
     var strExt = ".png"; 
     // otherwise, we use plain old GIFs 
    } else { 
     var strExt = ".gif"; 

    说明:
    在对象容器边界内,在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。
    PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说,你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。

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

     this.pngMethod = function(o) {
     // Native transparency support. Easy to implement. (woo!)
     bgImage = this.getBackgroundImage(o);
     if (bgImage) {
     // set background image, replacing .gif
     o.style.backgroundImage = 'url(' bgImage.replace('.gif','.png') ')';
     } else if (o.nodeName == 'IMG') {
     o.src = o.src.replace('.gif','.png');
     } else if (!this.isMac) {
     // window.status = 'PNGHandler.applyPNG(): Node is not a DIV or IMG.';
     }
     }

    var ns = (document.all)?false:true; 
    var browserVersion = parseFloat(navigator.appVersion ); 
    //---------------------------------------------------------------  

    实例:解决IE6下png透明失效的问题。

    </body>
    </html>

     this.getBackgroundImage = function(o) {
     var b, i1; // background-related variables
     var bgUrl = null;

    您可能感兴趣的文章:

    • Cross-Browser Variable Opacity with PNG
    • CSS opacity - 实现图片半透明效果的代码
    • 纯JS半透明Tip效果代码
    • IE6下opacity与JQuery的奇妙结合
    • 原生js实现半透明遮罩层效果具体代码
    • js CSS实现弹出居中背景半透明div层的方法
    • js和jQuery设置Opacity半透明 兼容IE6

    CSS样式:

    第 2 种方法: 给img定义样式,页面上所有透明png即自动透明了。(这方法只对直接插入的图片有效,对背景图无效)注意,要准备一个透明的小图片transparent.gif,大小不限。必须放在和html相同的目录
    请勿大量使用,否则会导致页面打开很慢!!!)

     if (o.nodeName == 'DIV' && !(this.isIE && this.isMac)) { // ie:mac PNG support broken for DIVs with PNG backgrounds
     if (document.defaultView) {
     if (document.defaultView.getComputedStyle) {
     b = document.defaultView.getComputedStyle(o,'').getPropertyValue('background-image');
     i1 = b.indexOf('url(') 4;
     bgUrl = b.substr(i1,b.length-i1-1);
     } else {
     // no computed style
     }
     } else {
     // no default view
     }
     }
     return bgUrl;
     }

    .png{
    _background: url() no-repeat !important; 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=noscale, src="");
    background:none;
    width:118px;height:133px;
    }

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <html xmlns="">
    <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

     this.supportTest = function() {
     // Determine method to use.
     // IE 5.5 /win32: filter

    .png div{position:relative;}

    • "', sizingMethod='crop')",
      this.runtimeStyle.backgroundImage = "none")),this.pngSet=true);
      }

     if (this.isIE && this.isWin && this.ver >= 5.5) {
     // IE proprietary filter method (via DXFilter)
     self.transform = self.filterMethod;
     } else if (!this.isIE && this.ver < 5) {
     self.transform = null;
     // No PNG support or broken support
     // Leave existing content as-is
     } else if (!this.isIE && this.ver >= 5 || (this.isIE && this.isMac && this.ver >= 5)) { // version 5  browser (not IE), or IE:mac 5
     self.transform = self.pngMethod;
     } else {
     // Presumably no PNG support. GIF used instead.
     self.transform = null;
     return false;
     }
     return true;
     }

    HTML代码:

    </style>
    </head>

    本文由1010cc时时彩经典版发布于1010cc时时彩客户端,转载请注明出处:1010cc时时彩经典版包括背景图,解决方法

    关键词:

上一篇:当场直击,万提斯学穿性感洋裙

下一篇:没有了