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>

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

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

css中加边框,首先我们需要确定你要加边框的元素的id或者是id,还有你必须保证这个元素是块级元素,不然width和height对它是无效的,自然也没边框,通过加display:block这个属性,来改成块级元素,具体看代码:

<html>

<head>

<style>

.div1{ //div本身就是块级,所以不需要,算span这中标签就是行级,所以需要display:block

width:600px

height:200px

font-size:13px

border:1px solid #f00

}

</head>

<body>

<div class='div1'>

</div>

</body>

</html>