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

html-css019

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>

.text{

/* -webkit-box-reflect: below*/

-webkit-text-stroke:1px #f00

font-size:50px

font-weight: bold

font-family: "微软雅黑"

width: 900px

height: 200px

line-height: 200px

margin:50px auto

text-align: center

}

</style>

</head>

<body>

<div class="text">用我三生烟火，换你一世迷离</div>

</body>

</html>

希望可以帮到你  望采纳

设置矩形边框 ：border : 1px solid #000000

添加文字：

<ul>

<li>九寨沟</li>

<li>黄山风景区</li>

。。。。。

。。。。。

。。。。。

</ul>

根据实际写N对li即可

希望可以帮到你～