JS Implementation method
| The code is as follows |
Copy Code |
|
document.write (' <script type= "text/javascript" id= "CT" defer= "defer" src= "Javascript:void" (0) "></script > '); var ct=document.getelementbyid ("CT"); Ct.onreadystatechange=function () {PngFix ()};p ngfix=function () {var els =document.getelementsbytagname (' * '), ip=/.png/i,al= "Progid:DXImageTransform.Microsoft.AlphaImageLoader" (src= ' ", I =els.length,uels=new Array (), C=0;while (i-->0) {if (Els[i].classname.match (/unitpng/)) {uels[c]=els[i];c++;}} if (uels.length==0) PFX (ELS), else PFX (uels), function pfx (ELS) {i=els.length;while (i-->0) {var el=els[i],es= El.style,elc=el.currentstyle,elb=elc.backgroundimage;if (El.src&&el.src.match (IP) &&!es.filter) { Es.height=el.height;es.width=el.width;es.filter=al+el.src+ "', sizingmethod= ' crop ')"; el.src=clear;} Else{if (Elb.match (IP)) {var path=elb.split (' "), rep= (elc.backgroundrepeat== ' no-repeat ')? ' Crop ': ' Scale ', elkids=el.getelementsbytagname (' * '), j=elkids.length;es.filter=al+path[1]+ "', sizingmethod= '" +rep+ "')"; es.height=el.clientheight+ ' px '; Es.backgrouNdimage= ' None '; if (j!=0) {if (elc.position!= "absolute") es.position= ' static ' while (j-->0) if (!elkids[j). style.position) elkids[j].style.position= "relative";}}}};
|
2. Page head, introduce this JS file.
| The code is as follows |
Copy Code |
| <script type= "Text/javascript" src= "your named file. js" ></script> |
3. Add Clear.gif to your Images folder. In the JS file, modify the "var clear=" Images/clear.gif Path, for you to store the Clear.gif file path.
The middle is "clear.gif picture, 1*1 is very small."
This makes the PNG image of your entire project transparent. It's pretty simple, isn't it? In 3 steps, the transparency effect of all PNG for the entire site is achieved.
Pure CSS Implementation Method two
The ie5.5+ alphaimageloader filter provides a way to PNG, and 0%-100% transparency is provided if he loads the PNG (Portable Network Graphics) format. We use this filter and hack to design a translucent PNG background image model.
Solving method
First, for your picture coat a div layer, like this:
| The code is as follows |
Copy Code |
<body> <div class= "Flower" ></div> </body> |
Then, write in the CSS file:
| The code is as follows |
Copy Code |
Body {background-color: #000} Div.flower {background:url (flower-transparent.png) no-repeat; height:100px; width:100px} |
Well, this refers to Mozilla Firefox, to make it appear normally under IE6, you should write between
| The code is as follows |
Copy Code |
<!–[if GTE IE 5]> <style type= "Text/css" > Div.flower { Background:none; Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src= ' flower.png ', sizingmethod= ' crop '); } </style> |
<! [endif]–> So, OK, the following is added the above code after the IE display diagram:
Method Three, I use the method myself
| The code is as follows |
Copy Code |
| Correctpng.js JavaScript Document 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)? "Id= '" + img.id + "'": ""
var imgclass = (img.classname)? "Class= '" + img.classname + "'": ""
var imgtitle = (img.title)? "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
}
}
}
function Alphabackgrounds () {
var rslt = Navigator.appVersion.match (/msie (d+.d+)/, "");
var Itsallgood = (rslt!= null && number (RSLT[1)) >= 5.5);
For (i=0 i<document.all.length; i++) {
var bg = document.all[i].currentstyle.backgroundimage;
if (BG) {
if (Bg.match (/.png/i)!= null) {
var mypng = bg.substring (5,bg.length-2);
alert (mypng);
Document.all[i].style.filter = "Progid:DXImageTransform.Microsoft.AlphaImageLoader" (src= ' +mypng+ ', sizingmethod= ' Crop ') ";
document.all[i].style.backgroundimage = "url (')";
alert (Document.all[i].style.filter);
}
}
}
} Html ...
<script type= "javascript" src= "Correctpng.js" ></script> <!--[if IE 6]> <script> if (Navigator.platform = = "Win32" && navigator.appname = "Microsoft Internet Explorer" && Window.attache Vent) {
Window.attachevent ("onload", correctpng);
Window.attachevent ("onload", alphabackgrounds);
}
</scrpit>
<! [endif]--> |
Note This JS method does not support repeating background, if the background is repeated can only show one, all the other support
