Use Dd_belatedpng to let IE6 support PNG transparent images

Source: Internet
Author: User

It is well known that IE6 does not support transparent PNG images, while PNG images are expressive in web design and have less effect than other graphic formats, IE6 this fatal flaw greatly limits the creative play of web design. There are many ways to resolve IE6 transparent PNG, from using IE-specific filters or expression, to javascript+ transparent GIF instead. But these methods have one drawback, The Backgrond-position and Background-repeat properties in CSS are not supported. The use of dd_belatedpng.js can be a perfect solution to IE6 under the PNG image transparency issues, and support Backgrond-position and background-repeat. This is not available in other ways, and Dd_belatedpng also supports a:hover properties, as well as . Our website joins the Dd_belatedpng processing navigation png transparent images, so that they maintain the same appearance under different browsers.

How to use:

First download JS file

0.0.8a.js (uncompressed version)


0.0.8a-min.js (compressed version)

Then reference the code in the page:

1<!–[if IE 6]>
2<script type= "text/javascript" src= "Download down JS path" ></script>
3<script>
4dd_belatedpng.fix (' CSS selector, application type ');
5</script>
6<! [endif]–>

The reference function is Dd_belatedpng.fix (), which fills in parentheses with the CSS selector (which can use the ID selector and class selector) and the application type (divided into IMG and background two) that apply PNG.

such as Dd_belatedpng.fix (' #box-one, img ') or Dd_belatedpng.fix ('. Header, background ') and so on.

These can be abbreviated into Dd_belatedpng.fix (' #box-one,. Header, Img,background '); 。

More selectors such as Dd_belatedpng.fix (' #box-one,. Header, #footer,. Box-two a:hover, Img,background '); Wait a minute.

In addition, to solve the IE6 under the background image flicker, you can add the following script in the page

1 <!–[if IE 6]>
2 <script type= "Text/javascript" >
3//<! [cdata[
4 if ((Window.navigator.appName.toUpperCase (). IndexOf ("MICROSOFT") >=0) && (Document.execcommand))
5 try{
6 Document.execcommand ("Backgroundimagecache", false, true);
7}
8 catch (e) {}
9//]]>
Ten </script>
<! [endif]–>

Use Dd_belatedpng to let IE6 support PNG transparent images

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.