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>
1、打开vscode，创建一个html页面。
2、在测试页面的同级目录，添加一张演示图片。
3、在测试页面中添加一个div标签，在标签内部添加一个img图片标签，设置图片的src地址。
4、在div的标签中，直接书写css的样式，设置div的宽度为500像素，高度为300像素，边框为1像素的红色框。再次在浏览器中打开，就可以看到图片，并没有填满整个div的空间。
5、想要让图片充满整个div，只需要对图片设置高宽都是100%即可。此处为了演示，将所有的img标签都设置成了100%，而且，使用的是外部css的书写形式。
6、如果图片使用的是背景图，不是img标签的形式，图片默认会在x和y轴重复，并不会拉伸，最终仍然填满了这个div的空间。
7、如果想要背景图也拉伸填满整个div空间，就需要设置背景图的，background-size: 100% 100%。
设置父结点的position为relative，子结点为absolute。然后通过子节点的top和left属性设置子节点相对于父节点的位置，例如top为40px，就是说子节点从距离父节点顶部40px的位置放置，left属性类似。默认情况下，后面的结点覆盖前面的结点。不过可以通过z-index设置哪个结点在上，z-index值较大的在上，小的在下。 图片重叠 div{ width:300px height:300px border:3px solid pink position:relative } img{ position:absolute width:150px height:150px padding:0 margin:0 } #img1{ top:50px left:40px } #img2{ top:100px left:100px }" />
"/>
