Wasting more than four hours fixing problems caused by the use of transparent PNG

Or because 《Show the just-created system logon Interface, The logon box has multiple Alpha values of different levels, the transparency of the surrounding outer border is 31%, the transparency of the logon box is 90%, and the transparency of the text box is 75%. When an HTML page is generated, three <span> values are used and corresponding Alpha values are set. The simplified values are as follows:

 

<Style type = "text/CSS">

. Lgfrmbg {position: absolute; top: 50%; left: 50%; margin:-148px 0 0-208px; width: pixel PX; Height: 297px ;}

. Lgfrm {position: absolute; top: 50%; left: 50%; margin:-142px 0 0-202px; width: 404px; Height: 285px ;}

. Frm {position: relative; top: 64px; left: 40px; Font: 12px; color: # dee4d6 ;}

. Frm input {margin: 4px 0 0 4px; Border: 1px solid # 14277a; filter: alpha (opacity = 75);-moz-opacity: 0.75; opacity: 0.75 ;}

</Style>

 

<SPAN class = "lgfrmbg"> <! -- Outer border --> </span>

<SPAN class = "lgfrm"> <! -- Logon box --> <SPAN class = "frm"> <! -- Text box --> <input type = "text" id = "edtaccount"/> </span>

 

Very simple. To make the interface look good, PNG is used to use the <span> basemap. To solve the bug of transparent PNG in IE6 and cross-browser, CSS hack is used, and the style sheet is changed:

 

. Lgfrmbg {position: absolute; top: 50%; left: 50%; margin:-148px 0 0-208px; width: pixel PX; Height: 297px ;}
HTML> body. lgfrmbg {background-image: URL (/images/lgfrmbg.png );}
* HTML. lgfrmbg {filter: progid: DXImageTransform. microsoft. alphaimageloader (Enabled = true, sizingmethod = scale, src = "/images/lgfrmbg.png") progid: DXImageTransform. microsoft. alpha (opacity = 31 );}

............

 

View the results in a browser. The UI is displayed well under IE6 and IE7, and the three <span> positions are seamlessly merged. The only problem is that no matter how you click the mouse, the text box is clicked. It was originally thought that the browser could not correctly calculate the location of the text box because of the "position: absolute; top: 50%; left: 50%; margin:-148px 0 0 0-208px" method, so it took four hours to modify this positioning method, and I tried again to think of and find the method, without satisfactory results.

Finally, I remembered that some people mentioned the CSS hack, which causes the internal link of the element to fail to be clicked. The result of a test is that the solution is very simple (instead of using display: inline instead of float on the internet). You just need to <span> separate the text box and change the CSS code slightly, in addition, this is more in line with W3C standards.

The modified code is as follows:
<Style type = "text/CSS">

. Lgfrmbg {position: absolute; top: 50%; left: 50%; margin:-148px 0 0-208px; width: pixel PX; Height: 297px ;}
HTML> body. lgfrmbg {background-image: URL (/images/lgfrmbg.png );}
* HTML. lgfrmbg {filter: progid: DXImageTransform. microsoft. alphaimageloader (Enabled = true, sizingmethod = scale, src = "/images/lgfrmbg.png") progid: DXImageTransform. microsoft. alpha (opacity = 31 );}
. Lgfrm {position: absolute; top: 50%; left: 50%; margin:-142px 0 0-202px; width: 404px; Height: 285px ;}
...............
. Frm {position: absolute; top: 50%; left: 50%; margin:-78px 0 0-162px; Font: 12px; color: # dee4d6 ;}
. Frm input {margin: 5px 0 0 5px; Border: 1px solid # 14277a;
Filter: alpha (opacity = 75 );
-Moz-opacity: 0.75;
Opacity: 0.75;
}

</Style>

 

<SPAN class = "lgfrmbg"> </span>
<SPAN class = "lgfrm"> </span>
<SPAN class = "frm"> <input type = "text" id = "edtaccount"/> </span>

 

It's been a waste of four hours !!