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

html-css011

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>

空白的产生一般由父容器的padding（内边距）和子元素的margin（外边距）产生，所以将以上两者的值设为0就能清除空白。看你的截图，猜想你应该是用了ol有序列表，可以尝试这样调整：

ol {margin:0 padding:0}