PNG (Portable Network Graphics) is a common format recommended by W3C for web images. However, the alpha channel of PNG is not opened for IE6 or earlier (which is supported by IE7, the effect of the transparent PNG image is reduced. Normally transparent PNG images are displayed under Firefox and opera, and a gray background color is displayed during ie browsing, which is not transparent, as shown in the following example:
One solution is to add a filter to the transparent PNG Image: reference content <Div style = "width: 100%; filter: progid: DXImageTransform. microsoft. alphaimageloader (src = 'transparent PNG Image path', sizingmethod = 'image')> </div>
Or use CSS to write the style in the CSS file, so you don't need to write such a long code for every image.
The transparent effect is like this: HTML code<Style type = "text/CSS"> <br/> <! -- <Br/> body {<br/> background-color: # ff9900; <br/>}< br/> --> <br/> </style> <br/> <Div style = "width: 128px; Height: 128px; filter: progid: DXImageTransform. microsoft. alphaimageloader (src = 'attachments/month_0703/h20073223321.png ', sizingmethod = 'image') "> </div> <br/>
[Ctrl + A select all tips: you can modify some code and then press run]
The second method is to use JavaScript For control. The program code is as follows:
Reference content <SCRIPT>
Function correctpng ()
{
For (VAR I = 0; I <document. Images. length; I ++)
{
VaR IMG = Document. Images [I]
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
I = I-1
}
}
}
Window. attachevent ("onLoad", correctpng );
</SCRIPT>
Add this PNG image to the page to make it transparent...
General browser transparency:
<! 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>
<Title> runcode </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Meta name = "author" content = "sheneyan"/>
<Style type = "text/CSS">
Body {Background: Gray ;}
Div # test {
Background: #000;
Color: white;
Width: 200px;
Position: absolute;
Left: 10px;
Top: 10px;
Filter: alpha (opacity = 50 );
-Moz-opacity:. 50;
Opacity: 0.5;
}
</Style>
</Head>
<Body>
Here is a bunch of text backgrounds ~ <Br/>
Here is a bunch of text backgrounds ~ <Br/>
Here is a bunch of text backgrounds ~ <Br/>
Here is a bunch of text backgrounds ~ <Br/>
Here is a bunch of text backgrounds ~ <Br/>
Here is a bunch of text backgrounds ~ <Br/>
Here is a bunch of text backgrounds ~ <Br/>
Here is a bunch of text backgrounds ~ <Br/>
Here is a bunch of text backgrounds ~ <Br/>
Here is a bunch of text backgrounds ~ <Br/>
Here is a bunch of text backgrounds ~ <Br/>
Here is a bunch of text backgrounds ~ <Br/>
Here is a bunch of text backgrounds ~ <Br/>
Here is a bunch of text backgrounds ~ <Br/>
Here is a bunch of text backgrounds ~ <Br/>
<Div id = "test"> I should be translucent ...... </Div>
</Body>
</Html>