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

html-css052

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>

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>百度知道郭凯旗</title>

<style>

li a{display:block width:100px height:20px border:1px solid red}

li span{display:inline-block width:80px height:20px border:1px solid blue}

li{display:inline-block width:80px height:20px border:1px solid black}

</style>

</head>

<body>

    <div>

       <ul>

          <li><a href="http://lovepy.com">这里是文字</a></li>

          <li><a href="http://lovepy.com">这里是文字</a></li>

          <li><a href="http://lovepy.com">这里是文字</a></li>

       </ul>

       <!--第一种  end-->

       <ul>

          <li><span>这里是文字</span></li>

          <li><span>这里是文字</span></li>

          <li><span>这里是文字</span></li>

       </ul>

        <!--第二种  end-->

       <ul>

          <li>这里是文字</li>

          <li>这里是文字</li>

          <li>这里是文字</li>

       </ul>

        <!--第三种  end-->

     </div>

</body>

</html>

这三种都能实现，但不要同时用。