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

Maison

interface Web

js tutoriel

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:58 PM

ie6png透明

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="/static/imghwm/default1.png"  data-src="icon_face_07.png"  class="lazy"    style="max-width:90%"  style="max-width:90%" / alt="Résumé des solutions expliquant pourquoi png ne peut pas être transparent sous les techniques IE6_javascript" >
<img  src="/static/imghwm/default1.png"  data-src="icon_face_10.png"  class="lazy"    style="max-width:90%"  style="max-width:90%" / alt="Résumé des solutions expliquant pourquoi png ne peut pas être transparent sous les techniques IE6_javascript" >
<img  src="/static/imghwm/default1.png"  data-src="icon_face_08.png"  class="lazy"    style="max-width:90%"  style="max-width:90%" / alt="Résumé des solutions expliquant pourquoi png ne peut pas être transparent sous les techniques IE6_javascript" >
</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="/static/imghwm/default1.png"  data-src="img/icon_face_03.png"  class="lazy"    style="max-width:90%"  style="max-width:90%" / alt="Résumé des solutions expliquant pourquoi png ne peut pas être transparent sous les techniques IE6_javascript" ><!--把图片换成你自己的图片 -->
<img  src="/static/imghwm/default1.png"  data-src="img/icon_face_05.png"  class="lazy"    style="max-width:90%"  style="max-width:90%" / alt="Résumé des solutions expliquant pourquoi png ne peut pas être transparent sous les techniques IE6_javascript" >
<img  src="/static/imghwm/default1.png"  data-src="img/menu_title_over.png"  class="lazy"    style="max-width:90%"  style="max-width:90%" / alt="Résumé des solutions expliquant pourquoi png ne peut pas être transparent sous les techniques IE6_javascript" >
</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 :

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 connexe

Construire une application SaaS multi-locataire avec next.js (intégration backend)Apr 11, 2025 am 08:23 AM

J'ai construit une application SAAS multi-locataire fonctionnelle (une application EdTech) avec votre outil technologique quotidien et vous pouvez faire de même. Premièrement, qu'est-ce qu'une application SaaS multi-locataire? Les applications saas multi-locataires vous permettent de servir plusieurs clients à partir d'un chant

Comment construire une application SaaS multi-locataire avec Next.js (Frontend Integration)Apr 11, 2025 am 08:22 AM

Cet article démontre l'intégration frontale avec un backend sécurisé par permis, construisant une application fonctionnelle EdTech SaaS en utilisant Next.js. Le frontend récupère les autorisations des utilisateurs pour contrôler la visibilité de l'interface utilisateur et garantit que les demandes d'API adhèrent à la base de rôles

JavaScript: Explorer la polyvalence d'un langage WebApr 11, 2025 am 12:01 AM

JavaScript est le langage central du développement Web moderne et est largement utilisé pour sa diversité et sa flexibilité. 1) Développement frontal: construire des pages Web dynamiques et des applications à une seule page via les opérations DOM et les cadres modernes (tels que React, Vue.js, Angular). 2) Développement côté serveur: Node.js utilise un modèle d'E / S non bloquant pour gérer une concurrence élevée et des applications en temps réel. 3) Développement des applications mobiles et de bureau: le développement de la plate-forme multiplateuse est réalisé par réact noral et électron pour améliorer l'efficacité du développement.

L'évolution de JavaScript: tendances actuelles et perspectives d'avenirApr 10, 2025 am 09:33 AM

Les dernières tendances de JavaScript incluent la montée en puissance de TypeScript, la popularité des frameworks et bibliothèques modernes et l'application de WebAssembly. Les prospects futurs couvrent des systèmes de type plus puissants, le développement du JavaScript côté serveur, l'expansion de l'intelligence artificielle et de l'apprentissage automatique, et le potentiel de l'informatique IoT et Edge.

Démystifier javascript: ce qu'il fait et pourquoi c'est importantApr 09, 2025 am 12:07 AM

JavaScript est la pierre angulaire du développement Web moderne, et ses principales fonctions incluent la programmation axée sur les événements, la génération de contenu dynamique et la programmation asynchrone. 1) La programmation axée sur les événements permet aux pages Web de changer dynamiquement en fonction des opérations utilisateur. 2) La génération de contenu dynamique permet d'ajuster le contenu de la page en fonction des conditions. 3) La programmation asynchrone garantit que l'interface utilisateur n'est pas bloquée. JavaScript est largement utilisé dans l'interaction Web, les applications à une page et le développement côté serveur, améliorant considérablement la flexibilité de l'expérience utilisateur et du développement multiplateforme.

Python ou JavaScript est-il meilleur?Apr 06, 2025 am 12:14 AM

Python est plus adapté à la science des données et à l'apprentissage automatique, tandis que JavaScript est plus adapté au développement frontal et complet. 1. Python est connu pour sa syntaxe concise et son écosystème de bibliothèque riche, et convient à l'analyse des données et au développement Web. 2. JavaScript est le cœur du développement frontal. Node.js prend en charge la programmation côté serveur et convient au développement complet.

Comment installer JavaScript?Apr 05, 2025 am 12:16 AM

JavaScript ne nécessite pas d'installation car il est déjà intégré à des navigateurs modernes. Vous n'avez besoin que d'un éditeur de texte et d'un navigateur pour commencer. 1) Dans l'environnement du navigateur, exécutez-le en intégrant le fichier HTML via des balises. 2) Dans l'environnement Node.js, après avoir téléchargé et installé Node.js, exécutez le fichier JavaScript via la ligne de commande.

Comment envoyer des notifications avant le début d'une tâche en quartz?Apr 04, 2025 pm 09:24 PM

Comment envoyer à l'avance des notifications de tâches en quartz lors de l'utilisation du minuteur de quartz pour planifier une tâche, le temps d'exécution de la tâche est défini par l'expression CRON. Maintenant...

See all articles

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Meilleurs paramètres graphiques

3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Solution d'énigmes de coquille

2 Il y a quelques semainesByDDD

R.E.P.O. Comment réparer l'audio si vous n'entendez personne

3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Comment déverrouiller tout dans Myrise

3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌

Afficher plus

Outils chauds

Adaptateur de serveur SAP NetWeaver pour Eclipse

Intégrez Eclipse au serveur d'applications SAP NetWeaver.

MinGW - GNU minimaliste pour Windows

Ce projet est en cours de migration vers osdn.net/projects/mingw, vous pouvez continuer à nous suivre là-bas. MinGW : un port Windows natif de GNU Compiler Collection (GCC), des bibliothèques d'importation et des fichiers d'en-tête librement distribuables pour la création d'applications Windows natives ; inclut des extensions du runtime MSVC pour prendre en charge la fonctionnalité C99. Tous les logiciels MinGW peuvent fonctionner sur les plates-formes Windows 64 bits.