第一种方法、添加一个DIV，采用绝对定位，图片所属DIV为基准。
参考代码如下：
1
2
3
4
5
6
<div style="position:relativewidth:100pxheight:100px">
<img src="" alt="" />
<div style="position:absolutewidth:100pxheight:100pxz-indent:2left:0top:0">
文字
</div>
</div>
第二种方法、图片作为背景图片。
参考代码如下：
1
2
3
<div style="background:url(abc.jpg) no-repeat left top">
文字
</div>
《CSS3文本阴影 text-shadow》
结构代码：
<div class="h5course">欢迎沟通交流~HTML5学堂</div>样式代码：
html {background: #000
}
.h5course {
width: 400px
height: 200px
text-shadow: 1px 1px 0 #f96,
-1px -1px 0 #f96
background: #ccc
line-height: 200px
text-align: center
font-size: 30px
font-family: "微软雅黑"
}
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>百度知道郭凯旗</title>
<style>
li a{display:block width:100px height:20px border:1px solid red}
li span{display:inline-block width:80px height:20px border:1px solid blue}
li{display:inline-block width:80px height:20px border:1px solid black}
</style>
</head>
<body>
<div>
<ul>
<li><a href="http://lovepy.com">这里是文字</a></li>
<li><a href="http://lovepy.com">这里是文字</a></li>
<li><a href="http://lovepy.com">这里是文字</a></li>
</ul>
<!--第一种 end-->
<ul>
<li><span>这里是文字</span></li>
<li><span>这里是文字</span></li>
<li><span>这里是文字</span></li>
</ul>
<!--第二种 end-->
<ul>
<li>这里是文字</li>
<li>这里是文字</li>
<li>这里是文字</li>
</ul>
<!--第三种 end-->
</div>
</body>
</html>
这三种都能实现，但不要同时用。
