Use Js or Css filters to implement the IE6PNG image translucent effect in IE6. ie6ie6png

Use Js or Css filters to implement the IE6PNG image translucent effect in IE6. ie6ie6png

Next we will introduce severalSolution to Opacity of PNG images in IE6

1. Use your own PNG to let IE6 go

When creating a PNG Image, save it as a GIF image, because IE6 supports gifimage transparency, and then defines

.pngtest{ background:url(mark.png); _background:url(mark.gif);}

Advantages: convenient, fast, and easy to use

Disadvantage: For PNG images, this method is only available in some local regions. However, if the image is translucent, this method cannot be implemented.

Another solution to this method is to save the png image as a 8-bit format using PS or other image editing tools, so that IE6 supports transparency.

2. CSS Filter for PNG Image translucent

.pngwrap{ padding:80px; background:green;}.pngtest{ width:165px; height:50px; overflow:hidden; text-indent:-9999em;background:url(http://www.bkjia.com/uploads/allimg/141010/16060043I-0.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.bkjia.com/uploads/allimg/141010/16060043I-0.png' sizingMethod='scale' enabled=true);}

 

Test IE6 using CSS Filter to solve the problem of PNG Image transparency

Code Description: The css attribute with the _ prefix can only be identified by IE6. Why should we add _ background: none ;, the reason is that the layer depth of the previously defined background image (which can be understood as the z-index of the attribute) is higher than that of the filter, and the image defined by the filter is blocked, therefore, we need to set the background of IE6 to none. The image path in PS: filter can be a remote image path or a relative path. If relative paths are used, it should be relative to the page path rather than CSS

Advantage: No JS patch is required, and image maintenance costs are low because a png image is used.

Disadvantage: The image defined by the filter does not support the background-position:; (positioning) background-repeat:; (tiled) attribute, so the CSS Sprite technology cannot be used, this method cannot be applied to the img tag. When it is applied to the link a tag, the link cannot be clicked. In this case, you need to define the position: relative of the tag.

3. Set HTC plugin PNG Image IE6 to Alibaba Cloud

<Q> Internet Explorer (IE) supports the concept of Web behavior starting from Version 5.5. These actions are described by a script file with the suffix ". htc". They define a set of methods and attributes that can be applied almost to any element on the HTML page. </Q> Please be patient with the detailed introduction to the htc File

Download the PNG Image transparency HTC plug-in from IE6 Browser

Copy the iepngfix.htcand blance.gif files to your website directory (copy the blance.gif, iepngfix. htc, iepngfix_tilebg.js files (this file is essential to support the position and repeat attributes) to a location ;)

The definition will be defined on the label of the PNG image, the following css style

img,div{behavior:url(iepngfix.htc);}

 

Modify iepngfix. IEPNGFix. blankImg = 'images/blank.gif 'in iepngfix. htc. The path is your image path.

Let the IE6 browser load JS files

<!--[if IE 6]><script type="text/javascript" src="../js/iepngfix_tilebg.js"></script><![endif]-->

 

Advantage: after this configuration is completed, it is very convenient for the whole site to be used. Once configured, it will be available for life.

Disadvantage: The relative configuration method. The website has three more files, and does not support pseudo classes such as the element hover. CSS Sprite technology cannot be used. When the page is loaded, the transparent area of the png image is gray.

4. css js Solution

This example also contains a transparent blamk.gif image, which is included in the third method compressed package. It is not provided here and defines the Css style.

img{_azimuth:expression(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",this.src = "blank.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",this.runtimeStyle.backgroundImage = "none")),this.pngSet=true);}

 

Code Description: this. src = "blank.gif" path is also relative to the page file, not the CSS file

Advantage: Relatively Simple Method

Disadvantage: a transparent image, such as blank.gif, supports only img labels, that is, PNG background images with element settings, and does not support pseudo classes such as element hover. It will also become gray when loaded.

5. Original Ecological javascript Solution

Javascript has many plug-ins for solving the opacity of IE6 PNG images.

Plug-in 1: Iepngfix

Download the PNG Image transparency iepngfix plug-in IE6 Browser

Let the IE6 browser load JS files

<!--[if IE 6]><script type="text/javascript" src="js/iepngfix.js"></script><![endif]-->

 

Plug-in 2: DD_belatedPNG

This plug-in should be a real plug-in, and its use method is very plug-in

Download the PNG transparent image DD_belatedPNG plug-in IE6 Browser

Benbo backup: DD_belatedPNG.js

<!--[if IE 6]><script type="text/javascript" src="js/DD_belatedPNG.js"></script><![endif]-->

 

Usage:

DD_belatedPNG.fix(".pngtest,#pngtest,.pngtest img,.pngtest:hover");

 

<!--[if IE 6]>    <script type="text/javascript" src="js/DD_belatedPNG.js"></script>    <script language="javascript" type="text/javascript">    window.onload = function(){        DD_belatedPNG.fix("*");    }    </script><![endif]-->

 

The fix () parameter must be passed to transparent elements or sub-elements. This method is basically the same as the $ Method for jQuery selection, but the separation between multiple elements is ", "While jQ uses spaces. For convenience, you can add spaces at the end of the file.

The solution of w3cfuns is to add id or class to each label that uses png, and then write

window.onload = function(){   DD_belatedPNG.fix(".pngFix,.pngFix:hover");}

 

In this way, class = "pngFix xx bbb" is added to the element to be transparent on the page. If the class contains a pngFix

Advantages: img labels, CSS Sprite, background, tile, and pseudo classes are supported. You can use them by introducing JS without any configuration.

Disadvantage: The PNG image will be grayed out during initial loading.

Plug-in 3: EvPng

This plug-in has the same advantages and disadvantages as DD_belatedPNG.

Download the transparent image EvPng plug-in from the IE 6 browser.

<!--[if IE 6]>    <script type="text/javascript" src="js/EvPng.js"></script>    <script language="javascript" type="text/javascript">    window.onload = function(){        EvPNG.fix("*");    }    </script><![endif]-->

 

Plug-in 4: JQueryPngFix plug-in

Download the PNG Image transparency jQueryPngFix plug-in IE6 Browser

Blog backup: JqueryPngFix

In the pngfix. js file, change the path of the transparent GIF image to the relative path of the page.

Let the IE6 browser load JS files

<!--[if IE 6]><script type="text/javascript" src="js/pngfix.js"></script><![endif]-->

 

Advantage: supports img and css background

Disadvantages: jQuery library is required. CSS Sprite, tile, and pseudo classes are not supported. Gray occurs during initial loading.

There are more htc solutions with this method, but the htc solution to the IE6 PNG transparency problem described here is only the tip of the iceberg of htc's function, htc has far more powerful applications in other aspects than this.

Refer:

Http://www.w3cfuns.com/forum.php? Mod = viewthread & tid = 297.

Http://www.cnblogs.com/rock506/archive/2010/11/30/1892067.html

Http://www.xuanfengge.com/ie6-png-transparency-solution.html

Can anyone use div + css to implement the background transparency effect compatible with ie and Firefox, and add the div + css Filter to me?

Dear user! I'm glad to answer your questions.
Transparent or progressive filters. css attribute filters are unique to IE and are not w3c standard attributes. Therefore, Firefox cannot use them to achieve the desired visual effect without support.
I hope my answers will be helpful to you. If you have any questions, please continue to consult us.

CSS puzzle in ie6, if the png background is transparent, the image cannot be repeated.

When I encountered this problem, I didn't use the JS file you mentioned. I used a JS file similar to the one installed on IE6, you can find and download the latest version of this file in Google Code. But I won't go straight to the specific file name.

Let's talk about the visual effect of referencing the JS file. Because there was no good-looking documentation at the beginning, let's talk about it according to the original visual test. After IE6 references, classic bugs such as the original CSS box model disappear, that is, IE6 is close to IE7 to some extent. This includes the effect that supports the PNG format.

At that time, I only struggled with whether to use this JS file. On the one hand, it increased the page burden. On the other hand, for pages close to completion, the original code written for the BUG was written in white, which caused some confusion.

So you can refer

On the other hand, if I use the filter on the first floor, I personally think the speed will have a great impact.

In addition, you may use another slicing or work ing method to solve the image problem to some extent based on the actual situation.

Well, it's just a bit messy.

Please contact me again.

Your supplement to the question

First, ask if you are a male or female. If you are a female, I will give you a file. If you are a male, I will not give it ~

Forget it. Don't tease you.

I just found out homepage.ntlworld.com/bosola/pngfix.js.
This is not used. I don't know the specific application effect. It should be fine.
Reference Method: <! -- [If lt IE 7.]>
<Script defer type = "text/javascript" src = "pngfix. js"> </script>
<! [Endif] -->

The second is what I mentioned earlier. Code.google.com/p/ie7-js/ this is an introduction and download.

However, I was surprised to find that the official website said
Unfortunately, the transparent background image cannot be tiled (repeated) using background-repeat. Nor can it be positioned using background-position.

Well, I can't remember what happened at that time. However, the first JavaScript code can be used to implement background duplication. If it does not work, it will not work. If the image is not big, use a large image.