1、打开Hbuilder编辑器，新建一个html空白文档，输入基本的结构，这里设置一个外围的div盒子，给外围的div高度宽度和背景颜色，文字包裹到span标签里，文字也设置一下颜色，按下Crtl+S保存一下：
2、此时可以在软件右侧的窗口可以看到效果：
3、把外围盒子的position属性设置为relative，span标签里的position属性设置为absolute，设置top、left、right、bottom的数值，此时在右侧的窗口就会发现文字的位置已经改变了：
1、打开sublime text3，并且新建一个html文档和一个css文档。
2、把最基本的html框架写出来。
3、在html的head部分写上编码字符集并引入css文件。
4、在html的body里面写一个div，打上文字并设置一个class名。
5、在浏览器中打开，查看现在的效果。
6、我们直接在选择的div的class名里面加一个“margin: 0 auto”属性保存。
有很多种方法可以实现。随便写几种。
------------------------------
CSS部分：
.text{background-imageurl(pic.jpg)
width: xx px /*你自己定义的宽*/
height: xx px /*你自己定义的高*/
overflow:hidden/*超出部分隐藏*/}
.text span{
margin-top:xx px/*离上边距离*/
margin-left:xx px/*离左边距离*/
}
html部分：
<div class="text"><span>字</span></div>
------------------------------
CSS部分：
.text{background-imageurl(pic.jpg)
width: xx px /*你自己定义的宽*/
height: xx px /*你自己定义的高*/
position:relative/*相对定位*/}
.text span{
position:absolute/*绝对定位*/
top:xx px/*离上边距离*/
left:xx px/*离左边距离*/
}
html部分：
<div class="text"><span>字</span></div>
--------------------------------------
CSS部分：
.text{background-imageurl(pic.jpg)
width: xx px /*注意，这里是你自己定义的宽减去padding-left的值*/
height: xx px /*注意，这里是你你自己定义的高减去padding-top的值*/
padding-top:xx px/*离上边距离*/
padding-left:xx px/*离左边距离*/
}
html部分：
<div class="text">字</div>
lz自己选吧。
