masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > Ringkasan penyelesaian mengapa png tidak boleh telus di bawah teknik IE6_javascript

Ringkasan penyelesaian mengapa png tidak boleh telus di bawah teknik IE6_javascript

WBOY
Lepaskan： 2016-05-16 15:58:06
asal
1249 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:



Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.

Label berkaitan：
ie6 png 透明
sumber：php.cn
Artikel sebelumnya：js untuk mendapatkan kemahiran huraian_javascript halaman Artikel seterusnya：Penjelasan terperinci tentang kemahiran policy_javascript asal yang sama
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Pelapik ibu bapa tidak diendahkan oleh anak yang berkedudukan melekit Bagaimana untuk mengelakkan unsur melekit daripada berada di belakang pengepala? Coretan k...
daripada 2024-04-06 11:42:51
0
1
338
Authserver "Tidak dapat menyambung" "Hos xxxxx tidak dibenarkan" selepas menukar IP pemasangan LAN Gunakan arahan pemasangan Windows lalai pada pemasangan Windows 10 logam kosong. Saya menj...
daripada 2024-04-04 15:06:41
0
1
374
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan