IE6 PNG Transparent (three solutions) (Turn to OH)
FF and IE7 have direct support for transparent PNG maps, the following is mainly to solve the IE6 under the transparent PNG image has a gray bottom
=============================================================================
This effect is simple, .... Pretty good recommendation
Style= "FILTER:progid:DXImageTransform.Microsoft.AlphaImageLoader (src=images/fl.png ')"
Grammar:
Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=benabled, Sizingmethod=ssize, Src=surl)
Enabled: Options available. A Boolean value (Boolean). Sets or retrieves whether the filter is active. true | False true: the default value. Filter activated.
False: The filter is forbidden.
Sizingmethod: Options available. String. Sets or retrieves how the picture of the object that the filter acts on is displayed within the bounds of the object container. Crop: Cuts the picture to fit the object's size.
Image: Default value. Increase or decrease the size boundaries of an object to fit the dimensions of the picture.
Scale: Scales the picture to fit the object's dimension boundaries.
SRC: Required option. String. Specifies the background image using an absolute or relative URL address. If this parameter is omitted, the filter will not function.
Characteristics:
Enabled: Readable and writable. A Boolean value (Boolean). See the Enabled property.
Sizingmethod: Readable and writable. String. See Sizingmethod properties.
SRC: readable and writable. String. See SRC attribute.
Description
Within the bounds of the object container, a picture is displayed between the object's background and content. It also provides an operation to cut and resize the image. If the PNG (Portable Network Graphics) format is loaded, the transparency of 0%-100% is also provided.
The transparency of a picture in the PNG (Portable Network Graphics) format does not prevent you from selecting text. That is, you can choose to display the content behind the fully transparent area of the picture in the PNG (Portable Network Graphics) format.
Example: solve the problem of transparent invalidation of PNG under IE6.
CSS style:
. png{
_background:url (http://www.snowangel.cn/images/angel.png) no-repeat!important;
Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (Enabled=true, Sizingmethod=noscale, src= "/http Www.snowangel.cn/images/angel.png ");
Background:none;
width:118px;height:133px;
}
. png div{position:relative;}
HTML code:
<div class= "PNG" >
<div>
CSS background PNG transparency and link invalidation problem solving
</div>
</div>
=============================================================================
1th method: Define a style and apply this style to a div, and the transparent PNG background image of the div is automatically transparent. (Note that the path of the two pictures is different, in this case, the Icon_home.png picture is in the same directory as the HTML file)
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Untitled Document </title>
<style type= "Text/css" >
<!--
. QQ {
height:90px;
width:90px;
Background-image:url (icon_home.png)!important;
Background-repeat:no-repeat;
_filter:progid:dximagetransform.microsoft.alphaimageloader (src= ' icon_home.png ');
_ Background-image:none;
}
-
</style>
<body>
<div class= "QQ" ></div>
</body>
The 2nd way: To define the style for IMG, all transparent PNG on the page is automatically transparent. (This method is only valid for directly inserted pictures, not valid for the background) note, to prepare a transparent small picture transparent.gif, unlimited size. Must be placed in the same directory as HTML
Do not use it heavily, or it will cause the page to open very slowly!!!)
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Untitled Document </title>
<style type= "Text/css" >
. mypng 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 = "Transparent.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);
}
</style>
<body>
Change to your PNG image
<div class= "Mypng" >
"
"
"
</div>
</body>
The 3rd method: with JS implementation, plus a section of the JS code, all the transparent PNG inserted automatically transparent. (Note that this method is only valid for directly inserted images, not valid for the background image)
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Untitled Document </title>
<script language= "JavaScript" >
function correctpng ()//correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arversion = navigator.appVersion.split ("MSIE")
var version = parsefloat (Arversion[1])
if (version >= 5.5) && (document.body.filters))
{
for (var j=0; j<document.images.length; J + +)
{
var img = document.images[j]
var imgname = Img.src.toUpperCase ()
if (imgname.substring (imgname.length-3, imgname.length) = = "PNG")
{
var imgid = (img.id)? "Id=" + img.id + "'": ""
var imgclass = (img.classname)? "class=" + img.classname + "'": ""
var imgtitle = (img.title)? "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
j = J-1
}
}
}
}
Window.attachevent ("onload", correctpng);
</script>
<style type= "Text/css" >
<!--
Body {
Background-color: #9999CC;
}
-
</style>
<body>
Change the picture to your own
<!--to change the picture to your own picture--
"
</body>
Method Four
<script language= "JavaScript" >
Fixed an issue where PNG images could not be displayed transparently under IE
function Fixpng (myimage) {
var arversion = navigator.appVersion.split ("MSIE");
var version = parsefloat (arversion[1]);
if (version >= 5.5) && (version < 7) && (document.body.filters))
{
var imgid = (myimage.id)? "Id=" + myimage.id + "'": "";
var imgclass = (myimage.classname)? "class=" + myimage.classname + "'": "";
var imgtitle = (myimage.title)? "title=" + myimage.title + "'": "title=" + Myimage.alt + "'";
var imgstyle = "Display:inline-block;" + MyImage.style.cssText;
var strnewhtml = "<span" + imgid + imgclass + imgtitle
+ "style=\" "+" width: "+ myimage.width
+ "PX; Height: "+ myimage.height
+ "PX;" + Imgstyle + ";"
+ "Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\ '" + myimage.src + "\ ', sizingmethod= ' scale '); \" ></span> ";
myimage.outerhtml = strnewhtml;
} }
Window.onload=function () {
Document.getelementbyidx ("Top"). style.height=screen.height/5+ "px";
}//
</script>
Use the following:
Solve the problem that IE6 does not support PNG-24 transparency
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
