css图片上面添加空白框编辑文字

html-css010

css图片上面添加空白框编辑文字,第1张

用CSS往图片上嵌入文字有二种方法,分别如下:

第一种方法、添加一个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>

楼主所说的空白框应该是可供用户输入姓名和学号的文本输入框,因此这样就可以了:

姓名:<input name="" type="text" style="width:250px" /><br />

学号:<input name="" type="text" style="width:250px" />

样式也可以直接定在样式表中,这里直接引用。