1.图片做为背景，文字采用text-align:center
2.采用相对与绝对定位层实现。
方法1的示例代码：
<style>
.huanhang_li a:link,.huanhang_li a:visited,.huanhang_li a:active{background:url(images/m1.jpg)no-repeatwidth:100pxheight:30px}
.huanhang_li a:hover{background:url(images/m1m.jpg )no-repeat}
</style>
<li class="huanhang_li"><a href="index-2.html">显示的文字</a></li>
方法2的示例代码：
<style>
.huanhang{width:100pxheight:30pxposition:relativebackground:url(images/m1m.jpg )no-repeat}
.huanhang a{position:absolutetop:20pxleft:40pxdisplay:blockwidth:100pxheight:30px}
</style>
<div><a href="index-2.html">显示的文字</a><div>
可以把图片作为文字那个块标签的背景图片或者你把图片和文字都放在一个同一个div 里面然后给图片和文字加上定位，然后文字的图层比图片的图层位置高就行了第一种
<style>
.div{width: 200pxheight: 200pxbackground: url("图片路径") no-repeat}
</style>
<div class="div">
<p>你的文字内容</p>
</div>
第二种
<style>
.div{width: 200pxheight: 200pxposition: relativez-index: 0}
.div img{position: absolutetop: 0left: 0width: 100pxheight: 100px}
.div p{position: absolutetop: 0left: 0z-index: 10}
</style>
<div class="div">
<img src="图片路径" alt="#">
<p>你的文字内容</p>
</div>
CSS（Cascading Style Sheets）层叠样式表
优势：
CSS可以提高页面的浏览速度。
缩短改版时间，降低维护费用。
强大的字体控制能力和排版能力。
css容易编写。
可以一次设计随处发布。
更好的控制页面布局。
实现表现和结构、内容相分离。
更方便搜索引擎的搜索/page Rank
样式规则：
语法：选择器｛属性1：值1；属性2：值2；...属性N：值N；｝
选择器就是要改变页面中的哪些标签元素
声明要用｛｝括起来，；结束
如果属性中包含空格要用“”括起来
可以指定多个选择器使用相同的样式
样式表：
外部样式表，新建.css文件，在文件中写入样式规则<link rel="stylesheet" href = "xxx.css">
内联样式表，在元素中添加style属性
嵌入式样式表，在html使用<style>标签，<style type="text/css"></style>
选择器：
元素选择器，元素名
id选择器，用#id
类选择器，用.class
后代选择器，选择器1 选择器2
css深化：
就近原则，！important提高元素优先级，伪类选择器，伪对象选择器，@import导入其他css文件，响应式布局可以解决多设备的兼容问题。
文本属性：
font-family：字体
font-size：字体大小
font-style：斜体
font-weight：粗体
color：颜色
line-height：行高
letter-spacing：字符间距
text-decoration：文本修饰
text-overflow：文字溢出处理
white-space : no wrap
text-overflow:hidden
text-align：文本对齐
背景属性：
background-color：背景颜色
background-image：背景图片
background-repeat：背景重复
background-attachment：背景图片附着
基于占满一整行与否，标签分为两大类（文档流）：
占满：行级元素（div，p，h1~h6）
不占满：行内元素（span，）
定位属性：
position：定位
absolute：绝对定位
relative：相对定位
