用img加背景的方法实现带效果的透明数字，兼容所有浏览器，并解决了ie6下不支持透明的bug，具体代码如下：
<!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=utf-8" />
<title>以显示带效果的文字为例，解决png图片在ie6下不透明的bug</title>
<style type="text/css">
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;} body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53,sans-serif;} h1,h2,h3,h4,h5,h6{font-size:100%;} address,cite,dfn,em,var{font-style:normal;} code,kbd,pre,samp{font-family:courier new,courier,monospace;} small{font-size:12px;} ul,ol{list-style:none;} a{text-decoration:none; color:#333;} a:hover{text-decoration:underline; color:#F00;} sup{vertical-align:text-top;} sub{vertical-align:text-bottom;} legend{color:#000;} fieldset,img{border:0;} button,input,select,textarea{font-size:100%;} table{border-collapse:collapse;border-spacing:0;} .clearfix:after{ content:"\020"; display:block; height:0; clear:both; visibility:hidden;} .clearfix{ zoom:1;}
body{ background:#333}
.num{ width:200px; height:36px; border:2px solid #FFF; text-align:left; padding:10px; margin:0 auto}
.num span{ width:25px; height:36px; display:block; float:left; overflow:hidden}
.num span img{ width:25px; height:474px; background:url(img/sp_num.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/sp_num.png')}
.num .n0 img{margin-top:0}
.num .n1 img{ margin-top:-46px;}
.num .n1 img{margin-top:-46px}
.num .n2 img{margin-top:-92px}
.num .n3 img{margin-top:-138px}
.num .n4 img{margin-top:-184px}
.num .n5 img{margin-top:-230px}
.num .n6 img{margin-top:-276px}
.num .n7 img{margin-top:-322px}
.num .n8 img{margin-top:-368px}
.num .n9 img{margin-top:-414px}
.num .comma img{margin-top:-460px}
.num .comma{position:relative;bottom:-27px;width:8px;height:14px}
</style>
</head>
<body>
<div class="num">
<span class="n9"><img src="img/img_blank.gif" width="1" height="1" alt="9" /></span>
<span class="n2"><img src="img/img_blank.gif" width="1" height="1" alt="2" /></span>
<span class="n3"><img src="img/img_blank.gif" width="1" height="1" alt="3" /></span>
<span class="comma"><img src="img/img_blank.gif" width="1" height="1" alt="," /></span>
<span class="n0"><img src="img/img_blank.gif" width="1" height="1" alt="0" /></span>
<span class="n0"><img src="img/img_blank.gif" width="1" height="1" alt="0" /></span>
<span class="n0"><img src="img/img_blank.gif" width="1" height="1" alt="0" /></span>
</div>
<!--
实现原理：
1、为保证图片质量准备一张png的数字图片；
2、切一张宽高都为1像素的图片；
3、以此例分析在每个span内先放置刚才切的1像素的图片，给每个span添加class【0-9】和【逗号（comma）】；
4、css内为所有span添加样式，注：宽和高分别是每个数字的尺寸设置溢出隐藏；
5、css设置span下所有的img元素的宽和高为png图片的尺寸，并为此图设置背景（sp_num.png）；
6、最后设置每个class下面的img的上边距来实现数字图片的显示；
// ie6下解决原理
首先用hack将background设为none，然后用微软针对ie专有属性将png图片显示在 img 上。
-->
</body>
</html>
