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

用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>

1、新建一个HTML页面。

2、在HTML的中写上

标签，打开浏览器会有对应的效果图。

3、内部嵌套css或者外部引用css文件（一般外部引用），给div增加样式，可以统一设置边框样式。

4、也可以分别设置边框样式。

可以用border-color属性设置span和div的边框颜色，用background属性控制span和div的背景颜色。

1、新建html文档，在body标签中添加div标签，然后在div标签中添加一些span标签：

2、添加style标签并定义一个类，为这个类设置border-color属性，属性值为边框的颜色，然后将这个类引用到div和span标签上，这时div和span就被添加上了边框颜色：

3、为之前设置的类添加background属性，属性值为背景颜色，这时div和span就被添加上了背景颜色：

---