We know that IE6 does not support transparent PNG, which undoubtedly limits the space for webpage design.
However, the entire Internet solution to this IE6 transparent PNG solution is also numerous, from the use of IE-specific filters or e-xpression, and then to javascript + transparent GIF alternative. however, these methods do not support backgrond-position and background-repeat in CSS.
The only reason I want to introduce DD_belatedPNG today is that it supports backgrond-position and background-repeat. this is not available for other js plug-ins. DD_belatedPNG also supports the: hover attribute and .
View Demo
Principle
This js plug-in uses Microsoft's VML language for rendering, while most other js plug-ins that solve PNG problems use the AlphaImageLoader filter.
Usage
1. Download The DD_belatedPNG.js file here.
2. Reference in the webpage as follows:
Copy codeThe Code is as follows:
<! -- [If lte IE 6]>
<Script src = "Js/DD_belatedPNG_0.0.8a.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
DD_belatedPNG.fix ('div, ul, img, li, input, a,. png_bg ');
/* Change. png_bg to the CSS selector with transparent PNG applied */
</Script>
<! [Endif] -->
3. There are two types of calling functions. One is DD_belatedPNG.fix (), as shown in the code above. The other is fix (). In this method, the css selector name must be specified in the function.
Use a: hover
5-25 update: If you want to use transparent PNG as the background image for a: hover like jutoy, you need to pay attention to your code and use ": as a selector. otherwise, the operation may fail. I also updated the demo. Please check the updates. next let's look at the correct code:
Copy codeThe Code is as follows:
<! -- [If IE 6]>
<Script type = "text/javascript" src = "js/DD_belatedPNG.js"> </script>
<Script type = "text/javascript">
DD_belatedPNG.fix ('. trans,. box a: hover ');
</Script>
<! [Endif] -->
Other solutions
Other solutions are provided here for your reference.
- Unit PNG Fix
- Ie7-js
- Ie png Fix