Maison > Article > interface Web > Résumé des solutions expliquant pourquoi png ne peut pas être transparent sous les techniques IE6_javascript

Résumé des solutions expliquant pourquoi png ne peut pas être transparent sous les techniques IE6_javascript

WBOYoriginal: 2016-05-16 15:58:061199parcourir

FF et IE7 prennent déjà directement en charge les images PNG transparentes. Le suivant est principalement utilisé pour résoudre le problème du fond gris dans les images PNG transparentes sous IE6

Copier le code Le code est le suivant :

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

Syntaxe :
filtre : progid:DXImageTransform.Microsoft.AlphaImageLoader ( activé=bEnabled , sizingMethod=sSize , src=sURL )

activé : facultatif. Booléen. Définit ou récupère si le filtre est actif. vrai | faux vrai : valeur par défaut. Filtre activé.
false : le filtre est désactivé.

sizingMethod : Facultatif. Chaîne. Définit ou récupère la manière dont l'image de l'objet filtré est affichée dans les limites du conteneur d'objets. crop : recadre l'image pour l'adapter aux dimensions de l'objet.
image : valeur par défaut. Augmentez ou diminuez les limites de taille de l'objet pour l'adapter aux dimensions de l'image.
scale : redimensionnez l'image pour qu'elle s'adapte aux limites de taille de l'objet.

src : obligatoire. Chaîne. Spécifiez l'image d'arrière-plan à l'aide d'une adresse URL absolue ou relative. Si ce paramètre est omis, le filtre n'aura aucun effet.

Caractéristiques :
Activé : Lisible et inscriptible. Booléen. Voir l'attribut activé.
sizingMethod : Lisible et inscriptible. Chaîne. Voir la propriété sizingMethod.
src : lisible et inscriptible. Chaîne. Voir l'attribut src.

Description :
Affiche une image entre l'arrière-plan et le contenu de l'objet, dans les limites du conteneur de l'objet. Et fournissez des opérations de découpe et de redimensionnement de cette image. Si le format PNG (Portable Network Graphics) est chargé, une transparence de 0 à 100 % est également fournie.
La transparence des images au format PNG (Portable Network Graphics) ne vous empêche pas de sélectionner du texte. Autrement dit, vous pouvez choisir d’afficher le contenu derrière la zone totalement transparente de l’image au format PNG (Portable Network Graphics).

Exemple : Résolvez le problème de l'échec de la transparence png sous IE6.

Style CSS :

.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;}

Code HTML :

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

/*
Compatible avec IE6.0, IE7.0, FF,
IE7.0 et la nouvelle version de FF peuvent réellement le rendre transparent sans ajouter de filtre.
*/

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

Méthode 1 : Définir un style Après avoir appliqué ce style à un certain div, l'image d'arrière-plan png transparente du div deviendra automatiquement transparente. (Notez que les chemins des deux images sont écrits différemment. Dans cet exemple, l'image icon_home.png et le fichier html sont dans le même répertoire)

<!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>

Méthode 2 : Définissez le style pour img, et tous les PNG transparents de la page seront automatiquement transparents. (Cette méthode n'est valable que pour les images directement insérées, pas pour les images d'arrière-plan) Notez que vous devez préparer une petite image transparente transparent.gif, la taille n'est pas limitée. Doit être placé dans le même répertoire que html
Veuillez ne pas l'utiliser en grande quantité, sinon la page s'ouvrira très lentement !!!)

<!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>

Méthode 3 : utilisez JS pour l'implémenter. Après avoir ajouté un morceau de code js, tous les png transparents insérés deviendront automatiquement transparents (notez que cette méthode n'est valable que pour les images directement insérées, pas pour. images d'arrière-plan)

<!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>

Méthode 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>

L'utilisation est la suivante :

Copier le code Le code est le suivant :

fd43f735a0996c4a074655ab639dd1c5

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：méthode js pour obtenir les compétences description_javascript de la pageArticle suivant：méthode js pour obtenir les compétences description_javascript de la page

Articles Liés

Voir plus