Image transparent, sawtooth problem is a headache for refactoring personnel problems, when meet such problems all let me feel don't know where to start, although can solve these problems, but always feel a little faults, recently met this problems, summarizes several implement some transparent insets mark sawtooth problem:
code is as follows:


<Div class="pwdTipsBg >" </div> <Div class="pwdTips >" <Span class="closeBtn >" </span> <I class="pwdTipsIcon >" </i> Verification code error, please fill in the latest to get verification code! </div> 1. The problem of using ie6 hack, expressed in two formats of pictures to; An other browsers use png24 format picture, ie6 with png8, according to the

  code is as follows:  


pwdTipsBg {height: 100%; Background: # 000; Opacity: 0.5; Position: absolute; Left: 0; Top: 0; Z - index: 1001; Filter: alpha (opacity=50); Width: 100%; Zoom: 1; PwdTips.}. {position: absolute; Left: 40%; Top: 40%; Z - index: 1009; Width: 285 px; Background: # ececec; Height: 55 px; Padding: 45 px 20 px 10 px, 80 px; I {}. PwdTips position: absolute; Left: 40 px; Top: 40 px; Background - position: - 152 px, px - 68; Width: 26 px; Height: 26 px; }. PwdTips span {position: absolute; Top: - 10 px; Right: 15 px; Width: 33 px; Height: 33 px; Background: url (closebtn. PNG) no - repeat 0 0; _background: url (scsprites. PNG) no - repeat - 119 px, px - 63; Cursor: pointer; Display: block; } 2. Use the filter filter image problem

  code is as follows:  


pwdTips span {position: absolute; Top: - 10 px; Right: 15 px; Width: 33 px; Height: 33 px; Background: url (closebtn. PNG) no - repeat 0 0; _background: none; Filter: progid: DXImageTransform. Microsoft. AlphaImageLoader, (SRC="http://www.jb51.net//css/css/safecenter/closebtn.png"); Cursor: pointer; Display: block; } 1, normal CSS code writing, through the background images to import, so all the browser USES this PNG image;

  code is as follows:  


background: url (closebtn. PNG) no - repeat 0 0; 2, through the filter for the introduction of images, the filter is introduced into image of time is relative to the HTML file, rather than relative to the CSS file, syntax is as follows:

  code is as follows:  


filter: progid: DXImageTransform. Microsoft. AlphaImageLoader, (SRC="http://www.jb51.net//css/css/safecenter/closebtn.png"); Code to write here, after we test on IE6 found IE6 or not transparent, because although we set up a filter into images, but the background is also load the image, and because of the high background layers than the filter set, so we did not show come out, so the final code is set to:
code is as follows:


pwdTips span {position: absolute; Top: - 10 px; Right: 15 px; Width: 33 px; Height: 33 px; Background: url (closebtn. PNG) no - repeat 0 0; _background: none; Filter: progid: DXImageTransform. Microsoft. AlphaImageLoader, (SRC="http://www.jb51.net//css/css/safecenter/closebtn.png"); Cursor: pointer; Display: block; } advantages:# 0 - #


This concludes the body part