The Portable Network Graphics authorize up to 256 levels of transparency which are not dealt with by Internet Explorer 6. degradation not being always possible, I refreshed myself the memory on the various manners of using the filter. I ended up falling on a comprehensive solution to manage this transparency even in the presence of a background-repeat or of a background-position! (This item is to some extent the continuation of Opacity and negotiable instrument of frame with transparent .)

Portable Network Graphics

The png is format of booking of image intended to replace the GIF format in its version 8 bits. The version 24 bits in - which understands more than illion colors - authorizes up to 256 very useful levels of transparency in to superimpose two images of which that of the top lets show through that of the lower part.

Unfortunately, IE6 does not understand anything on these various levels transparency: one needs , it is abrasive. Some recommend degradation: to use the transparency in the navigators who deal with it and to be used another thing for the last of the class: a png 8 bits with only one color of transparency, to amalgamate the two supposed images to superimpose itself, and even to use a slightly different image.

After all, the visitors are not always web developers using several versions of navigators to track the least difference of returned. If you can allow it to you, sink! In the contrary case, it will be necessary to resort to more or less functional solutions according to whether the image in question is placed in background of an element (a , for example) or in a beacon . If your transparent image is placed on a linked content, there remains the possible one to amend the image by software channel:

To amend the (segment) png

An image with the Portable Network Graphics is made up of various segments of which the famous which specifies a background-color by defect. It should be noted that the user agents (navigators, softwares, etc) are not held to adhere to this color and can use another of them. In IE6, this color approaches a greenish #86EEBC firing on turquoise…

Certain softwares as make it possible to amend the value of . If you have a content of color linked, it is enough to put at it the fill color on which your image containing of the transparent areas is placed.

In the contrary case, the Microsoft filters are our friends:

The filter from Microsoft

Internet Explorer (since version 5.5) includes a mechanism of filters owners of which which manages the transparency of the png 24 bits. The use of the filter defers according to whether the image is called via the beacon or as a background from another element.

Implemented to a beacon

Implements the filter to the images whose class is inside a reserved style sheet with IE6 with the conditional comments. It is enough to inform the source of in the variable :

 { 
    : :  (, );
}

Implemented to an image in background

For the navigators taking account of the transparency, you will have rule :

 {
    : 100px;
    : 150px;
    background: URL (. ) No-repeat;
}

For Internet Explorer 6, it will be necessary to use:

 {
    : 100px;
    : 150px;
    background: nun;
    : :  (, );
}

Note the attribute which can receive the securities image, or (via excellent the FAQ of the forum of .):

• image - Reduced or enlarges the block to correspond to dimensions of the image (default value),
• - Drawn bar the image with dimensions of the block,
• - Bad temper the image so that it holds in the block.

Some stresses

1. The source of the image must relate to the HTML document which displays it and not to the style sheet which claims it. So that an image being in a file images called in a file being in a file will not have to be any more on the ../pix/monImageTransparente.png path but on .

2. The links contained in an HTML element having background images transparent are not clickable any more, the fields input are not accessible any more and the text is not selectable any more. A general manner to cure it is to add a statement of the type:

    has,
    input {
       position: relative;
       Z-index: 1;
   }
   

   For more information on this question, lira the thread published on the forum of and the synthesis written by .

3. It is not possible to use the properties background-repeat and background-position with a transparent image png in background.

4. It is difficult to use events of style to permute background images with the passage of the mouse.

Pass to me the expression!

It is rather constraining. Fortunately, the web-based is filled people of goodwill who rolled up the handles to offer solutions to us on a plate. See rather:

* HTML ,
* HTML  {
    position: relative;
    : expression (( " nun ") && (? : ( == “IMG” &&    (“”) >-1? ( = “nun”,
     = “:  (” +  + ““,  image”)”,
     = “”): ( = ? :    (“URL (””, '')  (““)”, ''),
     = “:  (” +  + ““, ”)”,
     = “nun”)), )
    );
}

Found on via babylon-design.

* the HTML is there only to target IE6. You will be able to thus pass some to you if you use a style sheet dedicated to this navigator. Do not function if Javascript is decontaminated. Require a transparent image of 1px on side ().

Note: it will be perhaps necessary to add an Z-index: 1; to avoid the problems of links, elements of form or selection of text mentioned above.

A comprehensive solution with

There exist many scripts making it possible to automate with more or less happiness this management of the transparency of images png. They put all works the filter of it either in a Javascript file, or in a file . Among all existing scripts, I retained of that advised me Uncle Tom on .

This component manages the majority of the stresses stated higher, including the absence of taken into account background-repeat and background-position in version 2.0 Alpha 3.

Script is very simple to use:

1. Copy the files blank.gif in the file of your website,

2. Copy following statement in your style sheet or your HTML file:

    "  " >
       ,  {
           : URL ;
       }
   
   

   You can place in this selector all the HTML tags, the identifiers or the classes for which to wish you to activate the management of the transparency of the png. Separate them by a comma simply.

3. Do not forget that the path towards the files and blank.gif is relating to the HTML document and not to style sheet .

4. If your site is composed of under-file, do not hesitate to open the file in a text editor to amend the variable in order to make it point towards your transparent pixel. For example: = “”;

   This time still, the path must relate to the HTML document. If you wish to activate the assumption of responsibility of the properties background-repeat and background-position ensure you to include the file Javascript in your HTML document:

    " /Javascript "  "  " 
   

5. In certain cases, it will be necessary to send the good MIME type to Internet Explorer 6. The author of script provided for a file which includes the file while returning the MIME type associated with the files :

    "  " >
       , , have, input { 
           : URL ;
       }
   
   

6. To improve the performances, be most selective possible: prefer a or a with the use of the beacon only, except of course if all your images need script!

7. It may be that the greenish #86EEBC content briefly appears during the loading of the image. If you do not want this behavior (in particular on the larger pictures), you will have to only return to a “manual” use of the filter as indicated in the first party.

Do not hesitate to consult the file iepngfix.html present in the file which brings a sling load of information, tricks and astutenesss to use script and to cure the problems of use.

Conclusion

This subject seems inexhaustible, which is not my case. I leave this item in beta version during a few times history to let elutriate the subject: it would be astonishing that errors or inaccuracies did not slip under the mouse pad;)

External resources

General information on the Portable Network Graphics

http://www.thinkxtreme.com/

http://www.thinkxtreme.com/

http://www.thinkxtreme.com/

To manage the transparency of the png by software channel

http://www.thinkxtreme.com/

This software gives access the contained informations in file png of which in particular the (segment) to amend the background-color to which the transparency is implemented (a gray/green/turquoise content by defect in ). You find some explanations concerning his use on http://www.thinkxtreme.com/

http://www.thinkxtreme.com/

Very practical and easy to use software to improve compression of the images to the Portable Network Graphics. It is enough to make slip the images which you want to improve and deals with the remainder. Have some options to handle the or to keep a version of the image of origin.

http://www.thinkxtreme.com/

It is known little, but format specifications png 8 bits authorize several colors in the Alpha segment, which makes it possible to specify several transparent colors by using a suitable software like . Here is a good technique to be authorized a degradation of the transparent images under Internet Explorer 6!

http://www.thinkxtreme.com/

A little out-subject compared to the transparency the png, I announce the existence of a plugin for which makes it possible to optimize the weight of images png: the plugin installed by defect in does not return really justice to the possibilities of compression of this format.

Some scripts

http://www.thinkxtreme.com/

Version 1.0 and version 2.0 Alpha 3 of script . Manage the background-repeat and background-position in the alpha version using an additional Javascript file.

http://www.thinkxtreme.com/

This script is proposed by Yves Van . Many options available reserved to an informed public;)

File Javascript managing the majority of the traps posed by the implementation of the filter.

http://www.thinkxtreme.com/

With Links png not need to define classes or to target your elements. Function with the beacons or on the background-image. Very light. Thank you with 13sportif for the link.

http://www.thinkxtreme.com/

Expression Javascript allowing to manage the transparency of the png in or background

http://www.thinkxtreme.com/

Very light and practical script. Is implemented to all images png of your document. However, certain images remain in downloading mode then which are well displayed, which can give the impression to the visitor that something does not turn out badly on the site. Despite everything, this growing old script can still render some services: he pointed out the existence of the attribute to me " " of the beacon script which makes it possible to defer the loading (or the implementation) from script in question. See this very complete item on the analysis of .

http://www.thinkxtreme.com/

Propose an amended version of preceding script for the fields of forms " image " ""…/>

http://www.thinkxtreme.com/

Still a Javascript to be put under the mouse! Create a beacon in which the image discussed by the DirectX filter is displayed:

http://www.thinkxtreme.com/

More or less the same thing with a component .

http://www.thinkxtreme.com/

An original solution in .

Other resources on the transparency of the png

http://www.thinkxtreme.com/

The blonde proposes with pedagogy a summary of the various methods to manage this transparency on 256 levels.

http://www.siteduzero.com/tutoriel 3 82629 les-png-24-bits.html

Forward many solutions and skirting to display the transparent images.

http://www.thinkxtreme.com/

The FAQ of the forum on how to obtain the transparency of the png with Internet Explorer 6

http://www.thinkxtreme.com/

to mitigate the side-effects of the filter in the event of absolute positioning.

http://www.thinkxtreme.com/

Warning statement of Eric on the use of the filters: If you use it for an small icon of presentation which appears twenty times in your page, they is twenty executions of the filters which are made. With each execution of the returned filter is locked, on standby. On Yahoo! by withdrawing of leaf it is until s that they gained (information given by on its last presentation).

http://www.thinkxtreme.com/

Very instructive item on the transparencies of the Portable Network Graphics and the implementation of

http://www.thinkxtreme.com/

http://www.thinkxtreme.com/

http://www.thinkxtreme.com/pnghowto.htm

http://www.thinkxtreme.com/

http://noyau.pixtyle.net/viewtopic.php?pid= 31396

http://www.thinkxtreme.com/

http://www.thinkxtreme.com/