下面是完整的代码。
<!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/htmlcharset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
a{text-decoration:none}
ul,li{list-style: nonemargin:0padding:0}
li.bg a span{visibility:hidden}
</style>
</head>
<body>
<div class="aa">
<ul>
<li class="bg"><a href="#"><span>abcdefghijk</span></a></li>
<li>隐藏的文字在左上角，鼠标放上去看看</li>
</ul>
</div>
</body>
</html>
PS：SEO中通过这样的方法Google会判断你是作弊的，所以最好不要用这种方法，如果你只是想在一个背景图片上面做链接，可以做一个1x1像素的gif透明图片，然后给写成<a href="#" class="mylink"><img src="images/spacer.gif" alt="abc" /></a>
其中的alt写成你要seo的信息，这样也能起来 seo 的作用，而且不会被认为是作弊。
再给你上面的class=aa这个div写一个position: relative，然后再给那个透明的gif图片链接所在层.mylink定义一个position: absolute，通过top和left来绝对定位链接的位置
再通过.mylink img{width: 100pxheight: 22px}的方法定义宽度和高度，这样就大功告成了。
嗯，这肯定的，建议把结构分开。如我这段代码。<!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/htmlcharset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0padding:0}
.warp {width:300pxheight:300pxmargin:0 autoposition:relative}
.opacity{background:#000opacity:0.3filter:alpha(opacity=30)width:300pxheight:300pxposition:absolutetop:0left:0z-index:0}
p{ width:300pxtext-align:centerline-height:300pxposition:relativez-index:1color:#f00}
</style>
</head>
<body>
<div class="warp">
<div class="opacity"></div>
<p>这是要透明的文字</p>
</div>
</body>
</html>
把要透明的层和文字剥离分开，父层relative，子层全部absolute。这样。就没问题了
首先，图片必须是PNG/GIF格式，，，在IE6以上的浏览器版本，不用做任何处理图片即可透明，IE6下面代码
不能直接插入图片。要做成背景，并加入滤镜和CSSHACK，来显示透明效果
<!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/htmlcharset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{background:#3399CC}
#pngImg {
width: 300px
height: 99px
background: url('test.png') no-repeat top
*background: none
*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='corp', src='test.png')
}
</style>
</head>
<body>
<div id="pngImg"></div>
</body>
</html>
