IE6 compatible transparent background images and solutions

First, let me show you the renderings:

JS code:

<!--[if IE 6]>
<script src="~/Scripts/UI/DD_belatedPNG.js"></script>
<script>
$(function () {

Copy after login

//1. Through public class

DD_belatedPNG.fix(".pngFix,.pngFix:hover");

Copy after login

//2. Use selectors directly: class name, ID, label

DD_belatedPNG.fix(".imgpng,img");
});
</script>
<![endif]-->

Copy after login

html code:


DD_belatedPNG实现IE6下的透明背景

1、通过公共类pngFix

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





2、直接用选择器：类名，ID，标签实现

DD_belatedPNG.fix(".imgpng,img");

Copy after login

css code:

<style>
.contain { width: 1000px; height: 300px; margin: 0 auto; background: #fff; }
.contain .con { width: 400px; float: left; }
.contain h1 { font-size: 18px; color: #333; margin-bottom: 10px; }
.contain h2 { font-size: 16px; color: #333; }
.imgpng { width: 200px; height: 150px; background: url(/Content/IMG/Ie6.png); }
</style>

Copy after login

The solution to the problem that transparent images in ie6 are not displayed transparently

Some pictures have browser compatibility. Pictures that are transparent are opaque in IE6, such as:

Effect in ie6

Normal display effect

For the above situation, you only need to add the following piece of code at the end of the code to solve the problem

<!--[if IE 6]>
<script type="text/javascript">
function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) &#63; "id='" + img.id + "' " : ""
var imgClass = (img.className) &#63; "class='" + img.className + "' " : ""
var imgTitle = (img.title) &#63; "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span "+ imgID + imgClass + imgTitle + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src='" + img.src + "', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
correctPNG();
</script>
<![endif]-->

Copy after login

IE6PNG transparent solution

1. Use filters Code:

 #pics
 {
  background:url(../images/Logo.png)no-repeat;
  /*以下为IE6设置PNG透明代码*/
  _background:none;
  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/Logo.png");
 }

Copy after login

Tip: If you need to support linked hover, you need to define: cursor:pointer; in CSS to make it appear a hand shape, otherwise it will be the default mouse state.

Advantages:

1. Green without plug-ins;

2. High efficiency and fast speed;

3. When the network speed is slow, the background will not be gray and then transparent, and remote pictures are supported;

4. Supports pseudo-classes such as Hover, but two pictures must be used. If the network speed is slow, the second picture will not be displayed temporarily because it has not been fully loaded;

Disadvantages:

1. Tiling is not supported. Although the filter has sizingMethod="scale", stretching and scaling mode, the image will be deformed. If it is a pure color or a simple gradient color, it can be tiled horizontally;

2. The Img tag is not supported;

3. CSS Sprite is not supported;

Usage:

1. You can consider it when there is no img to introduce png;

2. You can consider it when there is no requirement for CSS Sprite;

3. You can consider it when there is no need for tiling;

2. Use JS to solve the gray background problem of img (png image inserted in the web page) png background in html

Just insert a piece of js into the page. The principle is the same as above, except that the img tag is replaced with the tag, and the background of the tag is set through a filter. It will do this for all inserted PNGs.

<!--[if IE 6]> 
<script>
function correctPNG() 
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i];
var imgName = img.src.toUpperCase();
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) &#63; "id='" + img.id + "' " :"";
var imgClass = (img.className) &#63; "class='" + img.className + "'" : "";
var imgTitle = (img.title) &#63; "title='" + img.title + "' " :"title='" + img.alt + "' ";
var imgStyle = "display:inline-block;" + img.style.cssText;
if (img.align == "left") imgStyle = "float:left;" +imgStyle;
if (img.align == "right") imgStyle = "float:right;" +imgStyle;
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle;
var strNewHTML = "<span "+ imgID + imgClass + imgTitle +"style=\"" + "width:" + img.width + "px;height:" + img.height + "px;" + imgStyle + ";" 
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" +"(src='" + img.src + "',sizingMethod='scale');\"></span>";
img.outerHTML = strNewHTML;
i = i-1;
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]--> &#8203;

Copy after login

3. DD_belatedPNG.js file

1. Introduce the js file. Also, since this js is only useful when using IE6, in order to make our page execute more efficiently, we can modify the above code as follows. This JavaScript will only be called and executed when IE6 is used:

2. Call the function and set the parameters as follows:

Copy code The code is as follows:

DD_belatedPNG.fix("#pngImg,#pics,#picsRepeat");

其中传入的参数为所使用png图片的标签的ID、类样式和标签名称，同样也可以按照下方这样来写

复制代码代码如下:

DD_belatedPNG.fix("#contentimg");

此方法则表示#content下的所有img标签透明

如果为链接和链接的hover设置透明，那么您按照下方这么来写，在部分版本里面可以不用加入:hover直接写选择器即可，但是为了保险，建议咱们还是加上:hover：

复制代码代码如下:

DD_belatedPNG.fix("#links,#link:hover");

写到这里并且您使用过jQuery或者CSSQuery类库，那么您一定熟悉上面的这种选择方法，总之就是，在CSS中您是如何选择的元素，那么在这个js函数（方法）中传入什么，只不过多个选择的时候，使用逗号隔开即可。

小技巧：如果页面中存在很多png，DD_belatedPNG.fix();函数的参数岂不是很长？我们可以使用这种写法：