Png Summary of solutions that cannot be transparent under IE6

Source: Internet
Author: User
Tags transparent image

Png Summary of solutions that cannot be transparent under IE6

Solving the problem of PNG Image transparency under IE6 many Google solutions are very common. When I used to do this kind of transparency, I used gif instead of png, so now I have not learned about this problem. Today, I will sort out this problem and summarize the solutions for you.

FF and IE7 have directly supported transparent png images. The following mainly addresses the gray background of transparent PNG images in IE6.

Copy the Code as follows:

Style = "FILTER: progid: DXImageTransform. Microsoft. AlphaImageLoader (src = images/fl.png ')"

Syntax:

Filter: progid: DXImageTransform. Microsoft. AlphaImageLoader (enabled = bEnabled, sizingMethod = sSize, src = sURL)

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.

Features:

Enabled: read/write. Boolean ). See enabled attributes.

SizingMethod: read/write. String ). See sizingMethod attributes.

Src: read/write. String ). See src attributes.

Note:

Within the boundary of the object container, an image is displayed between the background and content of the object. You can also cut and change the size of the image. If the file is loaded in PNG (Portable Network Graphics) format, the transparency between 0% and 100% is also provided.

The transparency of images in PNG (Portable Network Graphics) format does not affect your choice of text. That is to say, you can choose to display the content after the completely transparent area of images in PNG (Portable Network Graphics) format.

Example: Solve the Problem of transparent failure of png in IE6.

CSS style:

?

1

2

3

4

5

6

7

8

. Png {

_ Background: url (images/angel.png) no-repeat! Important;

Filter: progid: DXImageTransform. Microsoft. AlphaImageLoader (enabled = true, sizingMethod = noscale, src = "images/angel.png ");

Background: none;

Width: 118px; height: 133px;

}

 

. Png div {position: relative ;}

HTML code:

?

1

2

3

4

5

<Div class = "png">

<Div>

Solve the Problem of PNG transparency and link failure in CSS background

</Div>

</Div>

/*

Compatible with IE6.0, IE7.0, and FF,

IE7.0 and the new FF version can be directly transparent without the filter.

*/

========================================================== ============================================

Method 1: Define a style. After applying the style to a div, the transparent png background image of the div is automatically transparent. (The icon_home.png image and html file are in the same directory)

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<Html xmlns = "http://www.w3.org/1999/xhtml">

<Head>

<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;/* FF IE7 */

Background-repeat: no-repeat;

 

_ Filter: progid: dximagetransform.microsoft.alphaimageloader(src+'icon_home.png ');/* IE6 */

_ Background-image: none;/* IE6 */

}

-->

</Style>

</Head>

 

<Body>

 

<Div class = "qq"> </div>

 

</Body>

</Html>

Method 2: Define a style for img. All transparent png images on the page are automatically transparent. (This is only effective for directly inserted images, but not for background images. You need to create a small transparent image transparent.gif, which is not limited in size. Must be placed in the same directory as html

Do not use it in large quantities. Otherwise, the page will be opened slowly !!!)

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<Html xmlns = "http://www.w3.org/1999/xhtml">

<Head>

<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>

<Title> untitled document </title>

<Style type = "text/css">

. Mypng img {

Azimuth: expression (

This.png Set? This.png Set = 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" available, this.png Set = true );

}

 

</Style>

</Head>

 

<Body>

Change to your png Image

<Div class = "mypng">

</Div>

</Body>

</Html>

Method 3: Implemented Using JS. After a piece of js Code is added, all the inserted transparent png files are automatically transparent. (Note that this method is only valid for directly inserted images and does not work for background images)

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<Html xmlns = "http://www.w3.org/1999/xhtml">

<Head>

<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.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>

<Style type = "text/css">

<! --

Body {

 

}

-->

</Style>

 

<Body>

Replace the image with your own image

<! -- Replace an image with your own image -->

</Body>

</Html>

Method 4

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<Script language = "javascript">

// Fixed the issue that PNG images under IE cannot be transparently displayed.

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.css Text;

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. getElementById ("top"). style. height = screen. height/5 + "px ";

 

}//

</Script>

The usage is as follows:

The Code is as follows:


  

The above is all the content of this article. I hope you will like it.

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.