Because I have some web page production skills, I have heard a long time ago that translucent PNG files will have display problems under IE6, but since I have never had my own website, I have never really encountered it.
I started building my own website at the beginning of this year. I used a png picture with a transparent part to make the website LOGO. I thought it was old enough and there was no need to consider IE6. One day when I came back from get off work and opened the Google Analytics backend, I discovered that IE6 visits actually accounted for 40% of the total visits. I was shocked and quickly downloaded the green version of IE6 from the Internet to test my website. As expected, the LOGO was completely opaque.
So I searched online all night for solutions. Generally speaking, the online methods are relatively complicated, including css filters, js, gif replacement, etc. But I always felt it wasn't beautiful enough. Finally, after a night of searching, I found a method that only required 2 sentences of js code to solve the problem smoothly. Let’s share it with you next
First, download iepng.js from my website
http://www. *** .com/templates/default/js/iepng.js
If the element ID of your website that uses a semi-transparent png as the background is logo, add the following between <head></head>:
| <!-- for ie6 png fix --> <script type="text/javascript" src="templates/js/iepng.js"></script> <script type=text/javascript> EvPNG.fix('#logo');</script> |
Finally, let me explain, if you use a transparent png as the background of the div id foo, then it should be written as:
| EvPNG.fix('#foo'); |
If you use a transparent png as the background of a div class of bar, then it should be written as:
| EvPNG.fix('.bar"); |
The syntax is the same as CSS, OK. I hope to continue to exchange website building skills with you.
This article was originally created by Wang Zai, the webmaster of Tianniu.com (www.hers99.com). Please indicate the source when reprinting.