Images d'arrière-plan transparentes compatibles IE6 et compétences solutions

Tout d'abord, laissez-moi vous montrer les rendus :

Code JS :

<!--[if IE 6]>
<script src="~/Scripts/UI/DD_belatedPNG.js"></script>
<script>
$(function () {

Copier après la connexion

//1 Par cours public

DD_belatedPNG.fix(".pngFix,.pngFix:hover");

Copier après la connexion

//2. Utiliser directement les sélecteurs : nom de classe, identifiant, étiquette

DD_belatedPNG.fix(".imgpng,img");
});
</script>
<![endif]-->

Copier après la connexion

Code HTML :


DD_belatedPNG实现IE6下的透明背景

1、通过公共类pngFix

window.onload = function () {
DD_belatedPNG.fix(".pngFix,.pngFix:hover");
}





2、直接用选择器：类名，ID，标签实现

DD_belatedPNG.fix(".imgpng,img");

Copier après la connexion

code css :

<style>
.contain { width: 1000px; height: 300px; margin: 0 auto; background: #fff; }
.contain .con { width: 400px; float: left; }
.contain h1 { font-size: 18px; color: #333; margin-bottom: 10px; }
.contain h2 { font-size: 16px; color: #333; }
.imgpng { width: 200px; height: 150px; background: url(/Content/IMG/Ie6.png); }
</style>

Copier après la connexion

La solution au problème selon lequel les images transparentes dans ie6 ne s'affichent pas de manière transparente

Certaines images sont compatibles avec les navigateurs. Les images transparentes sont opaques dans IE6, telles que :

Effet dans ie6

Effet d'affichage normal

Pour la situation ci-dessus, il vous suffit d'ajouter le morceau de code suivant à la fin du code pour résoudre le problème

<!--[if IE 6]>
<script type="text/javascript">
function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
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
i = i-1
}
}
}
correctPNG();
</script>
<![endif]-->

Copier après la connexion

Solution transparente IE6PNG

1. Utiliser des filtres Code :

 #pics
 {
  background:url(../images/Logo.png)no-repeat;
  /*以下为IE6设置PNG透明代码*/
  _background:none;
  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/Logo.png");
 }

Copier après la connexion

Astuce : Si vous devez prendre en charge le survol lié, vous devez définir : curseur:pointeur; en CSS pour lui faire apparaître une forme de main, sinon ce sera l'état par défaut de la souris.

Avantages :

1. Vert sans plug-ins

2. Haute efficacité et vitesse rapide

3. Lorsque la vitesse du réseau est lente, l'arrière-plan ne sera pas gris puis transparent, et les images distantes sont prises en charge
;

4. Prend en charge les pseudo-classes telles que Hover, mais deux images doivent être utilisées si la vitesse du réseau est lente, la deuxième image ne sera pas affichée temporairement car elle n'a pas été complètement chargée

;

Inconvénients :

1. Le carrelage n'est pas pris en charge. Bien que le filtre ait un mode d'étirement et de mise à l'échelle sizingMethod=", l'image sera déformée s'il s'agit d'une couleur pure ou d'un simple dégradé, elle peut être carrelée horizontalement < ; 🎜>

2. La balise Img n'est pas prise en charge

3. CSS Sprite n'est pas pris en charge

Utilisation :

1. Vous pouvez l'envisager lorsqu'il n'y a pas d'img pour introduire le png

2. Vous pouvez l'envisager lorsqu'il n'y a aucune exigence pour CSS Sprite

3. Vous pouvez l'envisager lorsqu'il n'y a pas besoin de carrelage

2. Utilisez JS pour résoudre le problème de fond gris de l'arrière-plan img (image png insérée dans la page Web) en html

Insérez simplement un morceau de js dans la page. Le principe est le même que ci-dessus, sauf que la balise img est remplacée par la balise et que l'arrière-plan de la balise Il fera cela pour tous les PNG insérés.

<!--[if IE 6]> 
<script>
function correctPNG() 
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i];
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;
i = i-1;
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]--> &#8203;

Copier après la connexion

3. Fichier DD_belatedPNG.js

1. Introduisez le fichier js. De plus, comme ce js n'est utile que lors de l'utilisation d'IE6, afin de rendre notre page plus efficace, nous pouvons modifier le code ci-dessus comme suit. Ce JavaScript ne sera appelé et exécuté que lorsque. IE6 est utilisé :

2. Appelez la fonction et définissez les paramètres comme suit :

Copier le code Le code est le suivant :

DD_belatedPNG.fix("#pngImg,#pics,#picsRepeat");

其中传入的参数为所使用png图片的标签的ID、类样式和标签名称，同样也可以按照下方这样来写

复制代码代码如下:

DD_belatedPNG.fix("#contentimg");

此方法则表示#content下的所有img标签透明

如果为链接和链接的hover设置透明，那么您按照下方这么来写，在部分版本里面可以不用加入:hover直接写选择器即可，但是为了保险，建议咱们还是加上:hover：

复制代码代码如下:

DD_belatedPNG.fix("#links,#link:hover");

写到这里并且您使用过jQuery或者CSSQuery类库，那么您一定熟悉上面的这种选择方法，总之就是，在CSS中您是如何选择的元素，那么在这个js函数（方法）中传入什么，只不过多个选择的时候，使用逗号隔开即可。

小技巧：如果页面中存在很多png，DD_belatedPNG.fix();函数的参数岂不是很长？我们可以使用这种写法：