Application of PNG background in different browsers _ javascript skills

Source: Internet
Author: User
In the forum, kayeun asked me a question about the PNG transparent background in the FIREFOX browser. Here we will talk about how to apply the PNG image as the background in different browsers. 1. Use PNG background in IE6
IE6 itself does not know the transparency of PNG images, although there are JS programs that allow IE6 to support PNG transparent backgrounds:

The Code is as follows:


Function correctPNG ()
{
Var arVersion = navigator. appVersion. split ("MSIE ")
Var version = parseFloat (arVersion [1])
If (version> = 5.5) & (document. body. filters ))
{
For (var j = 0; 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.css Text
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 = "+" style = \ "" + "width:" + img. width + "px; height:" + img. height + "px;" + imgStyle + ";"
+ "Filter: progid: DXImageTransform. Microsoft. AlphaImageLoader"
+ "(Src = \ '" + img. src + "\', sizingMethod = 'Scale'); \">"
Img. outerHTML = strNewHTML
J = J-1
}
}
}
}
Window. attachEvent ("onload", correctPNG );


However, if there is only one place to be implemented, CSS is still used for higher efficiency. Here the AlphaImageLoader filter of IE5.5 + is applied:

The Code is as follows:


Filter:
Progid: DXImageTransform. Microsoft. AlphaImageLoader
(Src1_'temp.png ', sizingMethod = 'Scale ')


Note that the AlphaImageLoader filter will invalidate links and buttons in the region. The solution is to add: position: relative for links or buttons to make them relatively floating. In addition, AlphaImageLoader cannot set duplicate backgrounds, so it has high requirements on image cropping accuracy.
Ii. Use PNG background in IE7, Opera, and firefox
These browsers support PNG backgrounds well and can be directly applied. In practical applications, we need to take care of IE6 browsers at the same time, so we need to add * html to the style sheet for compatibility processing. That is, the background is given to the same tag twice.
For example:

The Code is as follows:


. Uicss_cn {background: transparent url (../images/temp.png) repeat-x bottom left; height: 3px; position: absolute; width: 100%; font-size: 0px ;}
* Html. uicss_cn {background: transparent;
Filter: progid: DXImageTransform. Microsoft. AlphaImageLoader (src = "../images/temp.png", sizingMethod = "crop ");}


Iii. add one point
On July 6, March 27, we accidentally discovered that the PNG background compatibility code inserted by ourselves was invalid. Finally, the problem was confirmed on the image file. To use some png images generated by fireworks, export them to the PSD format and save them as PNG files from PS.
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.