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

html-css08

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>