Heim > Artikel > Web-Frontend > Zusammenfassung der Lösungen, warum PNG unter IE6_javascript-Techniken nicht transparent sein kann

Zusammenfassung der Lösungen, warum PNG unter IE6_javascript-Techniken nicht transparent sein kann

WBOYOriginal: 2016-05-16 15:58:061199Durchsuche

FF und IE7 unterstützen bereits direkt transparente PNG-Bilder. Das Folgende wird hauptsächlich verwendet, um das Problem des grauen Hintergrunds in transparenten PNG-Bildern unter IE6 zu lösen

Code kopieren Der Code lautet wie folgt:

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

Syntax:
Filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=bEnabled, sizingMethod=sSize, src=sURL)

aktiviert: Optional. Boolescher Wert. Legt fest oder ruft ab, ob der Filter aktiv ist. true |. false true : Standardwert. Filter aktiviert.
false: Filter ist deaktiviert.

SizingMethod: Optional. Zeichenfolge. Legt fest oder ruft ab, wie das Bild des gefilterten Objekts innerhalb der Grenzen des Objektcontainers angezeigt wird. Zuschneiden: Schneidet das Bild so zu, dass es den Objektabmessungen entspricht.
Bild: Standardwert. Erhöhen oder verkleinern Sie die Größengrenzen des Objekts, um es an die Abmessungen des Bildes anzupassen.
Maßstab: Skalieren Sie das Bild so, dass es in die Größengrenzen des Objekts passt.

src: erforderlich. Zeichenfolge. Geben Sie das Hintergrundbild mit einer absoluten oder relativen URL-Adresse an. Wenn dieser Parameter weggelassen wird, hat der Filter keine Wirkung.

Eigenschaften:
Aktiviert: Lesbar und beschreibbar. Boolescher Wert. Siehe aktiviertes Attribut.
sizingMethod: Lesbar und beschreibbar. Zeichenfolge. Siehe die Eigenschaft „sizingMethod“.
src: lesbar und beschreibbar. Zeichenfolge. Siehe das src-Attribut.

Beschreibung:
Zeigt ein Bild zwischen dem Hintergrund und dem Inhalt des Objekts innerhalb der Grenzen des Objektcontainers an. Und stellen Sie Funktionen zum Ausschneiden und Ändern der Größe dieses Bildes bereit. Wenn das PNG-Format (Portable Network Graphics) geladen ist, wird auch eine Transparenz von 0 % bis 100 % bereitgestellt.
Die Transparenz von Bildern im PNG-Format (Portable Network Graphics) hindert Sie nicht daran, Text auszuwählen. Mit anderen Worten: Sie können den Inhalt hinter dem vollständig transparenten Bereich des Bildes im PNG-Format (Portable Network Graphics) anzeigen.

Beispiel: Lösen Sie das Problem des PNG-Transparenzfehlers unter IE6.

CSS-Stil:

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

.png div{position:relative;}

HTML-Code:

<div class="png">
<div>
CSS 背景PNG透明 及 链接失效问题解决
</div>
</div>

/*
Kompatibel mit IE6.0, IE7.0, FF,
IE7.0 und die neue Version von FF können es tatsächlich transparent machen, ohne einen Filter hinzuzufügen.
*/

============================================= === =============================

Methode 1: Definieren Sie einen Stil. Nachdem Sie diesen Stil auf ein bestimmtes Div angewendet haben, wird das transparente PNG-Hintergrundbild des Div automatisch transparent. (Beachten Sie, dass die Pfade der beiden Bilder unterschiedlich geschrieben sind. In diesem Beispiel befinden sich das Bild icon_home.png und die HTML-Datei im selben Verzeichnis)

<!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(icon_home.png)!important;/* FF IE7 */
background-repeat: no-repeat;

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

<body>

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

</body>
</html>

Methode 2: Definieren Sie den Stil für img, und alle transparenten PNGs auf der Seite werden automatisch transparent. (Diese Methode gilt nur für direkt eingefügte Bilder, nicht für Hintergrundbilder.) Beachten Sie, dass Sie ein kleines transparentes Bild transparent.gif vorbereiten müssen. Die Größe ist nicht begrenzt. Muss im selben Verzeichnis wie HTML
abgelegt werden Bitte nicht in großen Mengen verwenden, sonst öffnet sich die Seite sehr langsam!!!)

<!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&#63;this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1&#63;(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg&#63; 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>

Methode 3: Verwenden Sie JS, um es zu implementieren. Nach dem Hinzufügen eines Teils des JS-Codes werden alle eingefügten transparenten PNGs automatisch transparent (Beachten Sie, dass diese Methode nur für direkt eingefügte Bilder gilt, nicht für Hintergrundbilder. )

<!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) &#63; "id='" + img.id + "' " : "" 
       var imgClass = (img.className) &#63; "class='" + img.className + "' " : "" 
       var imgTitle = (img.title) &#63; "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 {

}
-->
</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>

Methode 4

<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) &#63; "id='" + myImage.id + "' " : "";
   var imgClass = (myImage.className) &#63; "class='" + myImage.className + "' " : "";
   var imgTitle = (myImage.title) &#63; "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>

Die Verwendung ist wie folgt:

Code kopieren Der Code lautet wie folgt:

fd43f735a0996c4a074655ab639dd1c5

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：js-Methode, um Seitenbeschreibungs-Javascript-Kenntnisse zu erhaltenNächster Artikel：js-Methode, um Seitenbeschreibungs-Javascript-Kenntnisse zu erhalten

In Verbindung stehende Artikel

Mehr sehen