Implement transparent png images and png backgrounds (supports multiple browsers)

Source: Internet
Author: User

Although javascript programs that allow IE6 to support PNG transparent backgrounds are not convenient, CSS is better. The AlphaImageLoader filter of IE5.5 + is used.
1.png transparent background
Solution:
Copy codeThe Code is as follows:
# Div1 {
Height: 600px;
Width: 260px;
Padding: 20px;
Background-repeat: repeat;
}
Html> body # div1 {
Background-repeat: repeat; background-image: url(bj1.png );
}
* # Div1 {filter: progid: DXImageTransform. Microsoft. AlphaImageLoader (enabled = true, sizingMethod = scale, src = "bj1.png ")
}

Additional: IE only recognizes wildcards (*) to define filters in IE browsers.
Firefox, Opera, and other browsers that fully support PNG transparent images also support sub-selectors (>)
Syntax:
Filter: progid: DXImageTransform. Microsoft. AlphaImageLoader (enabled = bEnabled, sizingMethod = sSize, src = sURL)
Attribute:
Enabled: Optional. Boolean ). Set or retrieve whether the filter is activated. True | false
True: default value. Filter activation.
False: the filter is disabled.
SizingMethod: Optional. String ). Sets or retrieves the display mode of the image of the object to which the filter applies within the boundary of the object container. Crop: Cut the image to fit the object size.
Image: default value. Increase or decrease the size boundary of an object to fit the image size.
Scale: scale the image to adapt to the size boundary of the object.
Src: required. String ). Specify the background image using an absolute or relative url. If this parameter is ignored, the filter will not work.
2.png image transparency
If you want to directly insert a png image into a webpage to make it transparent, you only need to add the following js Code. All directly inserted png images on the page can be transparent:
Copy codeThe Code is as follows:
<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.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 = "<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>

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.