Ringkasan penyelesaian mengapa png tidak boleh telus di bawah teknik IE6

Ringkasan penyelesaian mengapa png tidak boleh telus di bawah teknik IE6_javascript

WBOY

Lepaskan： 2016-05-16 15:58:06

asal

1198 orang telah melayarinya

FF dan IE7 sudah menyokong imej PNG lutsinar secara langsung berikut digunakan terutamanya untuk menyelesaikan masalah latar belakang kelabu dalam imej PNG lutsinar di bawah IE6

Salin kod Kod adalah seperti berikut:

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

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

didayakan : Pilihan. Boolean. Menetapkan atau mendapatkan semula sama ada penapis aktif. true |. false true : Nilai lalai. Penapis diaktifkan.
false : penapis dilumpuhkan.

Kaedah saiz : Pilihan. rentetan. Menetapkan atau mendapatkan semula cara imej objek yang ditapis dipaparkan dalam sempadan bekas objek. pangkas : Pangkas imej agar sesuai dengan dimensi objek.
imej: Nilai lalai. Tambah atau kurangkan sempadan saiz objek agar sesuai dengan dimensi gambar.
skala : Skala imej agar muat dalam sempadan saiz objek.

src: diperlukan. rentetan. Tentukan imej latar belakang menggunakan alamat url mutlak atau relatif. Jika parameter ini ditinggalkan, penapis tidak akan mempunyai kesan.

Ciri:
Didayakan: Boleh dibaca dan boleh ditulis. Boolean. Lihat atribut yang didayakan.
sizingMethod: Boleh dibaca dan boleh ditulis. rentetan. Lihat sifat sizingMethod.
src: boleh dibaca dan boleh ditulis. rentetan. Lihat atribut src.

Penerangan:
Memaparkan imej antara latar belakang dan kandungan objek, dalam sempadan bekas objek. Dan menyediakan operasi untuk memotong dan mengubah saiz imej ini. Jika format PNG (Grafik Rangkaian Mudah Alih) dimuatkan, ketelusan 0%-100% juga disediakan.
Ketelusan imej dalam format PNG (Portable Network Graphics) tidak menghalang anda daripada memilih teks. Dalam erti kata lain, anda boleh memilih untuk memaparkan kandungan di belakang kawasan telus sepenuhnya imej dalam format PNG (Portable Network Graphics).

Contoh: Selesaikan masalah kegagalan ketelusan png di bawah IE6.

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

Salin selepas log masuk

Kod HTML:

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

Salin selepas log masuk

/*
Serasi dengan IE6.0, IE7.0, FF,
IE7.0 dan versi baharu FF sebenarnya boleh menjadikannya telus tanpa menambah penapis.
*/

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

Kaedah 1: Tentukan gaya Selepas menggunakan gaya ini pada div tertentu, imej latar belakang png lutsinar div akan menjadi lutsinar secara automatik. (Perhatikan bahawa laluan kedua-dua imej ditulis secara berbeza. Dalam contoh ini, imej icon_home.png dan fail html berada dalam direktori yang sama)

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

Salin selepas log masuk

Kaedah 2: Tentukan gaya untuk img dan semua PNG lutsinar pada halaman akan menjadi lutsinar secara automatik. (Kaedah ini hanya sah untuk gambar yang dimasukkan terus, bukan untuk gambar latar belakang) Ambil perhatian bahawa anda perlu menyediakan gambar lutsinar kecil transparent.gif, saiznya tidak terhad. Mesti diletakkan dalam direktori yang sama seperti html
Tolong jangan gunakannya dalam kuantiti yang banyak, jika tidak, ia akan menyebabkan halaman dibuka dengan sangat perlahan!!!)

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

Salin selepas log masuk

Kaedah 3: Gunakan JS untuk melaksanakannya Selepas menambah sekeping kod js, semua png lutsinar yang dimasukkan akan menjadi lutsinar secara automatik (Perhatikan bahawa kaedah ini hanya sah untuk imej yang dimasukkan secara langsung imej latar belakang. )

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

Salin selepas log masuk

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

Salin selepas log masuk

Penggunaan adalah seperti berikut:

Salin kod Kod adalah seperti berikut: