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

html-css018

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 type="text/css">

img {

width:200px

height:200px

border:5px solid #00ff00

}

</style>

</head>

<body>

<img src="img/1.jpg" />

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