Maison interface Web js tutoriel 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

May 16, 2016 pm 03:58 PM
ie6 png 透明

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

Copier après la connexion

Code HTML :

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

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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> 

Copier après la connexion

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>

Copier après la connexion

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 de ce site Web
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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

Repo: Comment relancer ses coéquipiers
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
4 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment convertir PNG en JPG sous Windows 11 Comment convertir PNG en JPG sous Windows 11 May 12, 2023 pm 03:55 PM

Comment convertir PNG en JPG sous Windows 11 Sous Windows 10 et 11, vous pouvez utiliser l'application Paint intégrée de Microsoft pour convertir rapidement des fichiers image. Pour convertir une image PNG en JPG sous Windows 11, procédez comme suit : Ouvrez l'Explorateur de fichiers et accédez à l'image PNG que vous souhaitez convertir. Cliquez avec le bouton droit sur l'image et sélectionnez Ouvrir avec > Dessiner dans le menu. Votre photo ou image s'ouvre dans l'application Paint. Notez la taille du fichier en bas de l'écran. Pour convertir un fichier PNG en JPG, cliquez sur Fichier et sélectionnez Enregistrer sous > Image JPEG dans le menu. Lorsque la ressource de fichier

Comment résoudre le problème de la ligne noire de la barre des tâches transparente Win11 Comment résoudre le problème de la ligne noire de la barre des tâches transparente Win11 Dec 22, 2023 pm 10:04 PM

Après que de nombreux amis aient utilisé translucenttb pour configurer une barre des tâches transparente, ils ont découvert qu'il y avait une ligne noire dans la barre des tâches transparente win11, ce qui semblait très inconfortable. Comment dois-je le résoudre pour le moment ? . Il y a une ligne noire dans la barre des tâches transparente win11 : Méthode 1 : 1. Selon les commentaires des utilisateurs, vous pouvez cliquer avec le bouton droit sur translucide et ouvrir les paramètres. 2. Définissez ensuite la « marge » de l'option d'icône sur « 1 » pour résoudre le problème. Méthode 2 : 1. Si cela ne fonctionne toujours pas, vous pouvez cliquer avec le bouton droit sur l'espace vide pour ouvrir « Personnalisation » 2. Sélectionnez ensuite le thème par défaut du système pour le modifier. Troisième méthode : 1. Si tout le reste échoue, il est recommandé de désinstaller translucenttb. 2. Remplacez ensuite

Comment résoudre le problème de transparence d'une ligne sur la barre des tâches Win11 ? Comment résoudre le problème de transparence d'une ligne sur la barre des tâches Win11 ? Jan 29, 2024 pm 12:12 PM

De nombreux utilisateurs de Win11 définiront leur barre des tâches pour qu'elle soit transparente lors de l'exécution du système, mais de nombreux utilisateurs verront une ligne noire apparaître sur la barre des tâches après l'avoir configurée. Alors, que se passe-t-il ? Les utilisateurs peuvent utiliser un logiciel tiers pour le configurer. Laissez ce site Web présenter soigneusement aux utilisateurs la solution au problème d'une ligne transparente sur la barre des tâches Win11. Solution au problème d'une ligne transparente sur la barre des tâches win11. Méthode 1 : 1. Selon les commentaires des utilisateurs, vous pouvez cliquer avec le bouton droit sur translucenttb et ouvrir les paramètres. 2. Définissez ensuite la marge de l'option d'icône sur 1 pour résoudre le problème. 2. Sélectionnez ensuite le thème par défaut du système et modifiez-le pour résoudre le problème.

Comment définir la transparence en CSS Comment définir la transparence en CSS Nov 01, 2023 am 10:00 AM

Les méthodes CSS pour définir la transparence incluent l'attribut d'opacité, la valeur de couleur rgba, l'attribut de couleur d'arrière-plan, l'utilisation de pseudo-éléments, etc. Introduction détaillée : 1. L'attribut d'opacité, en définissant l'attribut d'opacité de l'élément pour obtenir un effet transparent, la plage de valeurs de cet attribut est de 0 à 1, 0 signifie complètement transparent, 1 signifie complètement opaque 2. Valeur de couleur RVB, en définissant l'opacité de l'élément La couleur d'arrière-plan ou la couleur du texte est une valeur de couleur rgba pour obtenir un effet de transparence. La valeur de couleur rgba se compose du rouge, du vert, du bleu, de la transparence, etc.

Tutoriel graphique pour rendre la barre des tâches Win7 transparente Tutoriel graphique pour rendre la barre des tâches Win7 transparente Jul 20, 2023 am 09:49 AM

Aujourd'hui, un groupe d'utilisateurs a demandé pourquoi leurs ordinateurs n'avaient aucun effet de transparence après la réinstallation de Windows 7. En fait, cela est dû au fait que votre ordinateur ne met pas à jour le pilote de la carte graphique à temps et n'ajuste pas le thème Windows 7 Aero. Vous pouvez le configurer des manières suivantes. 1. Tout d'abord, vous devez vous assurer qu'un nouveau pilote de carte graphique est installé sur votre ordinateur. Vous pouvez utiliser Driver Wizard ou 360 Driver Master pour mettre à jour le pilote de la carte graphique en ligne. . 2. Face à un espace vide sur le bureau, cliquez avec le bouton droit, sélectionnez Personnaliser et ouvrez. 3. Recherchez le thème Aero ici et sélectionnez-le. Dans des circonstances normales, vous devriez pouvoir voir l'effet du verre transparent. Comprenez-vous le tutoriel sur la façon de rendre votre barre des tâches Win7 transparente ? Étudiants qui ne savent pas comment faire, veuillez le faire rapidement.

Comment définir la transparence du terminal dans le système Linux ? Comment définir la transparence du terminal dans le système Linux ? Jan 07, 2024 am 10:21 AM

Lorsque Linux exécute des commandes dans le terminal, afin de rendre difficile la visualisation d'autres documents d'aide, tels que des PDF, des pages Web, etc., vous pouvez définir la transparence du terminal. Comment la définir ? Jetons un coup d'œil au didacticiel détaillé ci-dessous. . 1. Activer les effets spéciaux de la fenêtre 1. Pour définir la transparence du terminal, vous devez d'abord activer les effets spéciaux de la fenêtre. Tout d'abord, cliquez sur « Centre de contrôle » dans la barre des tâches. 2. Cliquez sur "Afficher" dans le Control Center. 3. Dans « Affichage », assurez-vous que le bouton « Activer les effets de fenêtre » est activé. 4. De plus, vous pouvez également utiliser les touches de raccourci shift+win+tab pour ouvrir ou fermer rapidement les effets de fenêtre. 2. Définir la transparence

Comment renommer l'extension de tous les fichiers d'un dossier, y compris les sous-dossiers Comment renommer l'extension de tous les fichiers d'un dossier, y compris les sous-dossiers Apr 14, 2023 pm 12:22 PM

Supposons que vous deviez renommer l'extension d'un fichier d'une extension à une autre, par exemple jpg en png. C'est facile, bien sûr ! Mais que se passe-t-il si vous avez plusieurs fichiers dont les extensions doivent être modifiées ? Ou pire, que se passe-t-il si ces multiples fichiers se trouvent également dans plusieurs dossiers et sous-dossiers, au sein d’un seul dossier ? Eh bien, pour une personne normale, cela peut être un cauchemar. Mais pour un geek, absolument pas. La question est maintenant : êtes-vous un geek ? Eh bien, avec l’aide de Geek Page, c’est définitivement le cas ! Dans cet article, nous expliquons comment renommer facilement l'extension de tous les fichiers d'un dossier, y compris les sous-dossiers de votre choix, d'une extension à une autre via une méthode de script batch. Avis:

Tutoriel étape par étape sur la façon de définir la transparence de la barre des tâches dans Windows 10 Tutoriel étape par étape sur la façon de définir la transparence de la barre des tâches dans Windows 10 Jul 11, 2023 pm 11:37 PM

Par hasard, j'ai vu la barre des tâches Win10 de quelqu'un d'autre être transparente, et elle était très belle. Après mon retour, j'ai également voulu que mon propre ordinateur Win10 soit transparent. Dans des circonstances normales, la barre des tâches par défaut n'a pas d'arrière-plan transparent et vous devez ajuster les paramètres. Ensuite, l'éditeur vous expliquera en détail comment rendre la barre des tâches Win10 entièrement transparente en une minute. 1. Tout d'abord, ouvrez le système Win10, puis cliquez avec le bouton droit sur le bureau et recherchez « Personnalisation » dans le menu contextuel. 2. Ensuite, dans la fenêtre « Personnalisation », sélectionnez « Couleur » dans le menu de gauche et cliquez pour. ouvrir. 3. Ensuite, recherchez « Effet de transparence » dans le menu de droite, sélectionnez « Activé » et cochez « Menu Démarrer, barre des tâches et centre d'action » et « Barre de titre ». 4. Ensuite, revenez à w

See all articles