How to use css to solve the problem of normal display of png transparent images in ie6

I haven’t written CSS for a long time. I struggled with a png transparent logo for a long time. It’s also my fault that the previous page didn’t consider the issue of transparency. I found several methods on the Internet, some of which are implemented with css, and some are implemented with js. Using js seems to be overkill. If you can use pure css to solve it, just use css. Thank you to Blueberry Princess for your help. The following two methods have been tried and worked, but the ie6 image under my virtual machine is completely transparent. I don’t know if it is a problem with my virtual machine.
First save the image as PNG-24 transparent format.
(The picture must have an absolute path)
Method 1: Use png image as background
Pay attention to the hack
html code

css code
.logo { width: 338px; height: 57px; float: left; url( /images/logo.png) 0px 0px no- repeat!important; text-indent: -1000px; _background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'#\'" /images/logo.png', senabled='true', sizingMethod ='scale'); }

Standard: _background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'#\'" /templets/dyimgs/wymrs/images/logo. png', enabled='bEnabled', sizingMethod='image');

Method 2: Insert png picture and define img
This method requires preparing a completely transparent picture transparent.gif, Any size.
htmlcode

css code
.logo { width: 338px; height: 57px; float: left; }
.logo img { width: 338px; height : 57px; }
/* png transparent compatible with ie6 */
.logo img {
azimuth: expression(
this.pngSet ? this.pngSet = true:(this.nodeName == "IMG " && "http://blog.51cto.com/viewpic.php?refimg=" + this.src.toLowerCase().indexOf('.png')>-1 ? (this.runtimeStyle.backgroundImage = "none ",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'#\'" //qianduangcs.blog.51cto.com/2624849/" + "http://blog.51cto .com/viewpic.php?refimg=" + this.src + "', sizingMethod='image')",
"http://blog.51cto.com/viewpic.php?refimg=" + this. src=\'#\'" /images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','' ).replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'#\'" //qianduangcs.blog.51cto.com/2624849 /" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true
);
}

Sometimes this transparent filter is added to the hyperlink, and then all the hyperlinks on the page cannot be clicked. The solution is:

Give a plus position: relative;

But here I want to remind you that your image path here is a relative path, so it is worth noting that this relative path is relative to html, not CSS.

The above is the detailed content of How to use css to solve the problem of normal display of png transparent images in ie6. For more information, please follow other related articles on the PHP Chinese website!